背景
在小程序開發(fā)過程中,我們使用小程序提供的播放組件<video>
播放mp4格式的視頻時,發(fā)現(xiàn)長達15min分鐘的視頻在4G環(huán)境下播放卡頓,加載速度慢,且拖拽進度條播放視頻不流暢的問題。
盡管,我們將視頻資源傳到了七牛CDN存儲,仍解決不了播放卡頓問題。于是,想到了以前做七牛調(diào)研時的視頻切片處理方案。
什么是視頻切片
切片將視頻流按指定的時間間隔,切分成一系列分片文件,并生成一個索引文件記錄分片文件的信息。
簡而言之,就是將一整段視頻切成一段段文件,然后播放時,加載索引文件,根據(jù)進度,加載播放指定分片文件。
那么,視頻切片后會有哪些好處?
- 減少視頻播放前加載時間
- 按需傳輸,穩(wěn)定傳輸速率,節(jié)省帶寬。
- 便于CDN緩存
七牛提供的音視頻切片
音視頻切片接口用于支持HTTP Live Streaming播放。HTTP Live Streaming 是由 Apple 提出的基于 HTTP 的流媒體傳輸協(xié)議。它將一整個音頻、視頻流切割成可由 HTTP 下載的一個個小的音視頻流,并生成一個 M3U8 播放列表,客戶端只需要獲取資源的 M3U8 播放列表即可播放音視頻。
在七牛控制臺進行視頻切片處理
Step1 登錄七牛控制臺
Step2 上傳視頻源文件
根據(jù)以下路徑上傳視頻源文件:
對象存儲 -> 選擇一個存儲空間(若沒有,則創(chuàng)建一個存儲空間)-> 內(nèi)容管理 -> 上傳文件 -> 選擇文件
上傳成功后,記住上傳的文件名以及bucket(存儲空間名,此處圖示為tianhls
)
Step3 創(chuàng)建多媒體隊列
在控制臺首頁的產(chǎn)品列表中,找到「多媒體隊列」,并創(chuàng)建隊列
此處,我們創(chuàng)建了一個叫「video_pipeline」的隊列:
Step4 新建作業(yè)
在隊列中,新建作業(yè)。根據(jù)提示,填寫相關(guān)信息。
預設(shè)規(guī)格,根據(jù)具體需求選擇 video-HLS-240k
、video-HLS-150k
、video-HLS-640k
、video-HLS-1000k
中任意一個。示例,選擇video-HLS-640k
.
最后,就是選擇處理后文件的存儲地址和文件名。需要注意的是,建議文件名取為 .m3u8
結(jié)尾的文件名。
然后,點擊「確認創(chuàng)建」。即可完成作業(yè)創(chuàng)建。接著,就是等待處理結(jié)果了。若狀態(tài)更新為成功,則處理完成。
Step5 獲取播放外鏈
回到「對象儲存」,找到剛剛處理成功的文件。
Step 6 驗證播放地址是否有效
測試地址
將獲取到的播放地址,放到該網(wǎng)頁上,進行測試。若播放成功,則說明文件有效。