最近公司準備上一套視頻播放的項目，對此我很興奮，視頻播放一直是技術(shù)中比較熱門板塊，并且又是一個比較老的板塊。想要一個視頻可以成功在網(wǎng)頁中播放，我從一個懵逼狀態(tài)到到真的實現(xiàn)播放總結(jié)了如下幾個步驟。
上傳
正常情況需要有一段可以播放的視頻，視頻格式其實無所謂， .mp4 .avi 都可以，一般保證在上傳的時候保證第一手視頻是非常清晰的原視頻。但是如果視頻太大的話就是上傳的時候會慢點。由于七牛的各項費用我覺得都還不是特步貴，所以依然選擇了七牛。這里涉及的其實是七牛的對象存儲，七牛對于上傳提供兩種方式表單上傳和分片上傳，如果上傳的資源文件小于 1gb，前者就行了，如果要使用分片上傳最好是使用七牛的 sdk 了。這里我上傳資源時后端接口返回到前端一個 token 和 key ，前端直接用 form 上傳到七牛就行。
轉(zhuǎn)碼
這塊其實是我研究很久的一塊，視頻為什么需要轉(zhuǎn)碼？這個問題不太好回答，那么接著問自己，什么是視頻？如果我說視頻是一張張連續(xù)播放的帶著背景音樂的圖片可能很多人也不會反對。那肯定會有這樣的問題， 什么是圖片？，圖片又是一個很有意思的話題，如果以后專門有研究再開篇說圖片，計算機世界里面這些視頻和圖片都是一堆有組織有預(yù)謀有規(guī)律的文件，前期按照一定的規(guī)則進行編碼存儲，后期按一定的編碼打開，其實這里面還少一個階段那就是現(xiàn)在的互聯(lián)網(wǎng)時代，還會產(chǎn)生一個從服務(wù)端到客戶端按一定編碼進行傳輸。
百度百科-視頻編碼 洋洋灑灑幾千字，反正最終勝出者是 H.264，這是一個非常了不起的編碼標準，它是集編碼效率高，占用空間小，清晰度高等多個特性與一身，所以現(xiàn)在世面上大多數(shù)視頻都是采用了這個標準。目前有個最新編碼是 H.265，貌似又是一個非常厲害的編碼格式有一統(tǒng)視頻編碼的趨勢，但是由于并非所有瀏覽器都兼容，所以不得已選擇了更為穩(wěn)健的 H.264，如果時間充裕，后期可以考慮上多個源，前端自由搭配。
其實轉(zhuǎn)碼就是將原視頻先解碼再編碼成合適的視頻源，七牛和又拍云上一直提示轉(zhuǎn)碼的功能，我開始很懵逼，難道一定需要用他們自家的轉(zhuǎn)碼轉(zhuǎn)的視頻才能在網(wǎng)頁上播放嗎，轉(zhuǎn)碼到底是為播放準備些什么，不過寫到這里問題肯定都是迎刃而解了。公司目前有人負責(zé)視頻上傳，對上傳者有轉(zhuǎn)碼的培訓(xùn)和要求，所以轉(zhuǎn)碼可以在上傳前就完成，但是如果播放的時候需要選擇多個視頻源，要求高清、2k、4k，這時候本地轉(zhuǎn)碼就顯得效率低下了，使用云轉(zhuǎn)碼顯然要便捷太多。
順便普及一下視頻清晰度，網(wǎng)絡(luò)視頻清晰和模糊會取決于多個因素，但是最重要的因為應(yīng)該是網(wǎng)絡(luò)帶寬與速度、視頻的編碼以及視頻的分辨率。網(wǎng)速暫且不論，編碼無非是 H.264 和H.265，那最后的視頻分辨率其實是代表視頻畫面的寬高，標準如下。
| 分辨率 | 別名 | 寬高 |
|---|---|---|
| 4K | 4K | 3840x2160 |
| 2K | 2K | 2560x1440 |
| FHD | 1080P、超清 | 1920x1080 |
| HD | 720P、高清 | 1280x720 |
| LD | - | 960x540 |
| SD | 標準 | 640x480 |
分辨率越高視頻細節(jié)就越豐富，需要傳輸?shù)膬?nèi)容也就越多。
切片
通過上面轉(zhuǎn)碼后的視頻原則上就已經(jīng)可以支持播放了，但是為什么會有切片這個過程？是因為往往一個 50mb 的視頻文件，需要下載完成后才能進行播放，那么下載的過程就讓用戶白白等待了，為了打破視頻下載中不能播放的情況，m3u8 應(yīng)運而生，簡單點說就是對一個特別長的視頻進行分塊切片，切成一段一段的，最終生成一堆的 .ts 文件和一個 .m3u8 的目錄文件，播放視頻的時候，只需要接入 m3u8 的地址，播放的時候會自動檢索需要下載的片段，這樣就完美解決了邊下邊播的問題了。
其實這里還想補充一個小插曲，就是放在七牛上的視頻，不進行切片也是可以“分片播放”的，這個當(dāng)時確實有點驚呆了，難道七牛自動給我切片了，還是什么原因，打開 chrome 的控制臺，發(fā)現(xiàn)瀏覽器一直在發(fā)送 http 請求，返回的結(jié)果 http code 都是 206，追尋著這個足跡，又去研究了下什么是 206 請求，原來是七牛服務(wù)器做的斷點續(xù)傳，每次請求返回都是源文件的一個片段，客戶端這邊對這一個片段進行解碼播放就 ok 了，我覺得這個也算一個偽切片的功能。
播放
使用 html5 的 video 標簽就可以進行各種視頻的播放了,或者 video.js 等其他播放器。如果用到視頻加密，可以選擇一些定制化視頻播放器，視頻加密后，通過特殊播放器解密。
