基於七牛雲接口的視頻播放器實現

不洗碗工做室--hanxiao

轉載請標明出處

文章背景：這兩天在研究網課系統，最終卡在了播放器的帶寬問題上，用了一些網上的開源項目，可是用CDN加速效果不理想，致使播放視頻的用戶體驗不好，因而就想着本身作一個播放器出來

先說一些我用的某開源網課系統的播放器，他是直接加載服務器上的視頻文件，並且是一整個視頻文件，這樣就致使個人http請求在視頻加載完以前就死掉了，而後播放器出現了不可預估的錯誤，左右衡量，感受單純加大http請求的生存時間不可取（不知道爲啥，就是感受不可取），因而我打開了慕課網的播放器並打開瀏覽器控制檯，我發現慕課網的播放器是加載一個個小的視頻文件，以.ts文件結尾的，在此基礎上通過一番陰差陽錯的查找，我找到了這種播放器的實現原理：視頻切片

首先咱們先講一下七牛文件（圖片，視頻）上傳的流程

1. 後端經過定製文件的處理方式（定製上傳到的七牛庫的路徑，文件名，文件處理），再經過七牛的SDK來生成uploadToken，而後前端只要拿着文件和這個token，傳給七牛，七牛就會對咱們的文件進行相應的處理，並返回結果（返回結果的處理不作講解，能夠本身查看七牛文檔）
2. 正常來講，咱們是須要將返回結果作處理的，比方說在上傳成功後將文件連接存在數據庫裏，並將這個文件和咱們的業務系統聯繫起來
3. 前端經過咱們存在數據庫裏的文件連接，來訪問資源

七牛雲有自帶的多媒體處理API，我只講視頻切片的用法

• 音視頻切片文檔

• 根據這個文檔，咱們能夠作出以下視頻上傳所需的uploadToken接口（我這裏是用PHP寫的，你們能夠根據個人代碼，照貓畫虎嘛~）

  

• 這裏還涉及到一個概念，叫持久化處理，結合這張圖片，仔細看，我這裏採用的策略是上傳時就觸發，由於我這裏的viedoDeal字符串裏包含了兩部分，一個是saveMp4Entry參數，這個參數的意思是將這個處理好的視頻文件命名爲test2.mp4並存在我提早建立的bucket裏，在後面的viedoDeal裏前面的部分是切片處理，你能夠在根據我上面的文檔連接來定製這一條而後我又將saveMp4Entry拼接在這後面，做爲一個總體放進了policy數組裏，這個policy裏面有另外一個參數叫persistentPipeline，它指的是視頻處理這個過程，放進哪一個隊列裏，這個隊列是須要咱們在七牛的控制檯手動建立的 這樣一來，最基礎的uploadToken接口就完成了，整個視頻上傳的過程咱們是能夠在七牛的控制檯直觀的監控的，首先，在前端老哥寫好上傳頁面後，上傳文件，他那裏顯示上傳好了以後，你進入七牛的bucket看一下，發現有了一個命名很奇怪的.mp4文件，這是源文件（未經切片處理的文件），而後呢你能夠去隊列裏查看，發現多了一個任務，這個任務就是正在處理那個源文件，若是用的是個人代碼，那就是正在進行視頻切片啦，待這個隊列任務完成後，你再進入bucket查看，發現多了好多的命名有規律的.ts文件，這些就是被切成一片一片的視頻片斷啦，還有另一個關鍵文件，咱們的test2.mp4，這個文件你用postman發get請求到這個連接，會獲得以下反饋

  

  發現這是一個.ts文件的列表信息，經過這個文件，前端老哥就能夠經過現有的播放器JS庫來拉取相應的視頻片斷了

• PS：在控制檯看隊列任務的時候，你會發現，他顯示的結果是：任務完成，回調失敗，若是你沒寫回調接口相關的參數的話，這樣很正常，不過不影響咱們實驗

到這裏，一個簡易的播放器就作完了，具體的前端實現呢能夠等咱們前端老哥的文章寫出來，我會把連接貼到這裏，後端部分我是用PHP寫的（laravel框架），你能夠參考個人代碼，最基礎的跟播放器有關的實現都在這裏啦，一些細節的部分，以及業務邏輯就須要你們自行探索，七牛的文檔仍是很全的，固然了你也並不必定限制於七牛，一些其它平臺的對象存儲和視頻處理接口應該都是能夠用的，看我的習慣啦~

啊對了，開發過程當中，要注意緩存的問題，七牛貌似會默認給你的文件進行CDN加速，我以前就被它坑了，就是說，你新上傳的文件連接若是和以前的文件連接重複了，你訪問這個連接反饋的是舊文件，不是最新的文件哦

還有還有，我的文筆很差，邏輯還有些混亂，雖然我已經儘量梳理了，可是你們仍是有可能看不大明白，歡迎在評論區留言，在本文章範圍內的我若是會的話能夠給你們講解一下