寫在前面的話
為什么要播放 m3u8 格式的視頻
1.對于一個小視頻來說，理論上直接播放 mp4 的本地文件即可
2.但如果將網(wǎng)站部署到云上，其他用戶通過網(wǎng)址訪問時，想要看到這個視頻，就需要先完整的下載格式為 mp4 的視頻文件
3.當視頻文件下載完成后，網(wǎng)站才可以播放該視頻，這就對于用戶體驗是極大的下降
正規(guī)項目一般如何處理
1.對于一個大型項目來說，一般會視頻會使用流媒體播放器來播放視頻
2.例如阿里云的流媒體播放器，則是將所有視頻存儲到阿里云的流媒體服務器
3.網(wǎng)頁端通過阿里云為每個視頻提供的 VID 來訪問視頻
4.這首先需要在網(wǎng)頁端繼承一個流媒體播放器，同時還需要后端對接阿里云服務端，來獲取視頻的鑒權(quán)地址
5.帶來的好處是可以保證視頻資源相對安全，降低被人直接盜取的可能性
6.缺點則是對接起來過于繁瑣，在小項目上顯得得不償失
7.具體對接步驟可參考Java + jQuery 實現(xiàn)阿里云點播
小項目可以如何快速操作
1.可以使用?FFmpeg?將普通的 mp4 格式的視頻文件轉(zhuǎn)換為 m3u8 格式
2.再使用?Video.js:?播放轉(zhuǎn)碼后的視頻
參考網(wǎng)址
2..網(wǎng)站播放視頻較慢，利用mp4轉(zhuǎn)m3u8解決 - 簡書
實現(xiàn)步驟
下載視頻轉(zhuǎn)碼工具 FFmpeg
前往FFmpeg Download下載對應版本的工具
該工具不需要安裝，是通過命令行運行的
win10 - 64位
鏈接：https://pan.baidu.com/s/1c9-YSm7e0kgeUl4u0vYYeg
提取碼：cryn
需要注意的一點：如果是 Mac 用戶，可能會嘗試使用 Homebrew 安裝，這里需要說的是 “可以，但是沒必要”
因為如果通過 Homebrew 安裝，會自動安裝一堆依賴文件，而且最后工具可能還安裝失敗
關(guān)鍵是該工具的使用不需要做任何系統(tǒng)配置，直接前往執(zhí)行文件目錄執(zhí)行對應命令即可
所以完全沒必要通過 Homebrew 安裝到系統(tǒng)中
使用 FFmpeg 對視頻進行轉(zhuǎn)碼
1.下載成功并解壓后的目錄入下圖
2.打開終端，進入到上圖文件中的目錄
3.?為了操作簡單，將待轉(zhuǎn)碼的視頻放在D:\video（D盤里新建一個video文件夾）
4.?在終端執(zhí)行如下命令( 二選一 )
第一種轉(zhuǎn)換命令
#轉(zhuǎn)mp4為ts
ffmpeg -y -i D:\video\video.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb D:\videos\a.ts
第二種轉(zhuǎn)換命令
#一次性完成轉(zhuǎn)換和切片，切片時長為60秒
ffmpeg -i D:\video\video.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls D:\videos\zxcu.m3u8
5.這個時候視頻轉(zhuǎn)換就完成了
需要注意的是上述生成的兩類文件（m3u8和ts）需要保存在一起
將轉(zhuǎn)碼后的視頻文件放置到服務器中
1.需要注意的是，m3u8 格式的文件無法像 mp4 一樣通過相對/絕對路徑進行訪問
2.必須將其放置在某個服務器中，然后通過鏈接進行訪問
3.而且需要再次強調(diào)的是，video.m3u8和video0.ts兩個文件必須放置在同一個目錄中
4.具體是放置在 Nginx ，還是 Tomcat 這個隨意，畢竟我們的靜態(tài)網(wǎng)站要部署，實際上也需要依托服務器
5.可以將視頻文件放置于網(wǎng)站相同的服務器中，只需要指定網(wǎng)址 + 目錄即可
6. 如果使用vue來播放m3u8視頻，會產(chǎn)生跨域（請用Nginx?代理跨域）
前端video標簽播放m3u8格式視頻
以下是全部代碼：
<!DOCTYPE?html>
<html?lang="zh-CN">
<head>
????<meta?charset="UTF-8">
????<title>前端播放m3u8格式視頻</title>
????<link?,?function?()?{
????????changeVideo(src);
????})
</script>
前端Vue插件播放m3u8格式視頻
參考文檔： https://github.com/langyuxiansheng/vue-aliplayer-v2
參考文獻
https://www.cnblogs.com/li1992/p/11316008.html
http://www.lxweimin.com/p/eb5cd63647c3
https://blog.csdn.net/qq_30282133/article/details/81566273
前端video標簽播放m3u8格式視頻
