在不借助流媒體播放器的前提下，直接播放 m3u8 格式的視頻文件
更多精彩
- 更多技術(shù)博客，請(qǐng)移步 IT人才終生實(shí)訓(xùn)與職業(yè)進(jìn)階平臺(tái) - 實(shí)訓(xùn)在線
寫在前面的話
為什么要播放 m3u8 格式的視頻
- 對(duì)于一個(gè)小視頻來說，理論上直接播放 mp4 的本地文件即可
- 但如果將網(wǎng)站部署到云上，其他用戶通過網(wǎng)址訪問時(shí)，想要看到這個(gè)視頻，就需要先完整的下載格式為 mp4 的視頻文件
- 當(dāng)視頻文件下載完成后，網(wǎng)站才可以播放該視頻，這就對(duì)于用戶體驗(yàn)是極大的下降
正規(guī)項(xiàng)目一般如何處理
- 對(duì)于一個(gè)大型項(xiàng)目來說，一般會(huì)視頻會(huì)使用流媒體播放器來播放視頻
- 例如阿里云的流媒體播放器，則是將所有視頻存儲(chǔ)到阿里云的流媒體服務(wù)器
- 網(wǎng)頁(yè)端通過阿里云為每個(gè)視頻提供的 VID 來訪問視頻
- 這首先需要在網(wǎng)頁(yè)端繼承一個(gè)流媒體播放器，同時(shí)還需要后端對(duì)接阿里云服務(wù)端，來獲取視頻的鑒權(quán)地址
- 帶來的好處是可以保證視頻資源相對(duì)安全，降低被人直接盜取的可能性
- 缺點(diǎn)則是對(duì)接起來過于繁瑣，在小項(xiàng)目上顯得得不償失
- 具體對(duì)接步驟可參考 Java + jQuery 實(shí)現(xiàn)阿里云點(diǎn)播
小項(xiàng)目可以如何快速操作
參考網(wǎng)址
實(shí)現(xiàn)步驟
下載視頻轉(zhuǎn)碼工具 FFmpeg
- 前往 FFmpeg Download 下載對(duì)應(yīng)版本的工具
- 該工具不需要安裝，是通過命令行運(yùn)行的
-
需要注意的一點(diǎn)：如果是 Mac 用戶，可能會(huì)嘗試使用 Homebrew 安裝，這里需要說的是 “可以，但是沒必要”
- 因?yàn)槿绻ㄟ^ Homebrew 安裝，會(huì)自動(dòng)安裝一堆依賴文件，而且最后工具可能還安裝失敗
- 關(guān)鍵是該工具的使用不需要做任何系統(tǒng)配置，直接前往執(zhí)行文件目錄執(zhí)行對(duì)應(yīng)命令即可
- 所以完全沒必要通過 Homebrew 安裝到系統(tǒng)中
使用 FFmpeg 對(duì)視頻進(jìn)行轉(zhuǎn)碼
- 下載成功并解壓后的目錄入下圖
-
ffmpeg 就是執(zhí)行命令
image
-
-
打開終端，進(jìn)入到上圖文件中的目錄
image - 為了操作簡(jiǎn)單，將待轉(zhuǎn)碼的視頻直接復(fù)制到該目錄下
- 可以看到下圖中多了一個(gè) video.mp4 文件
image
- 可以看到下圖中多了一個(gè) video.mp4 文件
- 在終端執(zhí)行如下命令
./ffmpeg -i ./video.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls ./video.m3u8
- 執(zhí)行完成之后會(huì)在當(dāng)前目錄多出 video.m3u8 和 video0.ts 文件，如下圖
image - 這個(gè)時(shí)候視頻轉(zhuǎn)換就完成了
- 需要注意的是上述生成的兩個(gè)文件需要保存在一起
將轉(zhuǎn)碼后的視頻文件放置到服務(wù)器中
- 需要注意的是，m3u8 格式的文件無(wú)法像 mp4 一樣通過 相對(duì)/絕對(duì) 路徑進(jìn)行訪問
- 必須將其放置在某個(gè)服務(wù)器中，然后通過鏈接進(jìn)行訪問
- 而且需要再次強(qiáng)調(diào)的是，video.m3u8 和 video0.ts 兩個(gè)文件必須放置在同一個(gè)目錄中
- 具體是放置在 Nginx ，還是 Tomcat 這個(gè)隨意，畢竟我們的靜態(tài)網(wǎng)站要部署，實(shí)際上也需要依托服務(wù)器
- 可以將視頻文件放置于網(wǎng)站相同的服務(wù)器中，只需要指定 網(wǎng)址 + 目錄 即可
下載視頻播放器 Video.js
- 前往 Getting Started with Video.js 可獲取視頻插件的 CDN 地址，或下載地址
- 推薦使用 CDN 地址，因?yàn)榉奖憧旖?/li>
在項(xiàng)目中引入 Video.js 的 CSS/JS 文件
- 以下代碼引入的是在線文件
...
<link rel="stylesheet">
...
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
...
在項(xiàng)目中引入 Video 標(biāo)簽
- 可以看到以下代碼中的視頻文件是一個(gè)網(wǎng)址為前綴的鏈接
- 如果是本地調(diào)試的話，也可能是
http://127.0.0.1:8090/video/video.m3u8
- 如果是本地調(diào)試的話，也可能是
<video id="welcomeVideo" class="video-js vjs-default-skin">
<source id="source" src="http://www.asing1elife.com/video/video.m3u8" type="application/x-mpegURL" />
</video>
初始化 Video.js
- 具體參數(shù)如何使用，可以參考 Tutorial: options | Video.js Documentation
<script>
var myVideo = videojs('welcomeVideo', {
loop: true,
controls: false,
preload: 'auto',
autoplay: true
})
</script>
