簡介

隨著客戶的增加，mp4檔案播放的弊端也日益凸顯，主要集中在兩個方面

1. 當視訊時長比較長的時候，mp4的關鍵幀元素往往很大，需要載入很長時間才能開始播放，網速不好的情況緩衝載入就要20多秒的時間，客戶早已急不可耐。
2. 當用戶開啟一個視訊播放的時候，瀏覽器會持續請求下載mp4檔案直到下載完成，就算是使用者暫停視訊播放瀏覽器也會持續這種下載狀態，如果這個視訊檔案是500M則會請求伺服器下載500M檔案，是1G則會不停下載1G，給伺服器硬碟和寬頻造成很大浪費和壓力。

為了解決上述問題，公司打算使用m3u8格式來替代mp4格式。

m3u8是蘋果公司開發的一項新型播放格式，這種播放格式支援目前市面的windows、androis、ios裝置主流的瀏覽器，同樣的視訊檔案既可以在flash環境播放，又能在無flash的html5環境播放，它的優勢還不止於此，它可以實現多種位元速率在不同網速下的自動切換，網速好自動切換高清晰度視訊，網速慢自動播放低清晰度檔案，還可以實現流加密（視訊檔案本身加密）、分段下載播放、任意時間點拖拽播放、隨機視訊檔案廣告插入等等優勢，所以公司打算是用m3u8格式作為視訊格式。

mp4轉碼m3u8

如果視訊不為mp4格式，需先將視訊轉碼為mp4，可使用如下命令進行轉換

ffmpeg -i 本地視訊地址 -y -c:v libx264 -strict -2 轉換視訊.mp4

• 1

將mp4格式轉換為ts格式

ffmpeg -y -i 本地視訊.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb 轉換視訊.ts

• 1

將ts檔案進行切片

ffmpeg -i 本地視訊.ts -c copy -map 0 -f segment -segment_list 視訊索引.m3u8 -segment_time 5 字首-%03d.ts
 

• 1

其中segment 就是切片，-segment_time表示隔幾秒進行切一個檔案，上面命令是隔5s，你也可以調整成更大的引數。

轉換好的檔案

跨域問題

在跨域的網站根目錄放crossdomain.xml檔案，下面是允許所有的網站（一般不採取這樣的方式，只是方便除錯）均可以跨越訪問資源配置如下：

<?xml version="1.0" encoding="utf-8"?>
<cross-domain-policy> 
    <allow-access-from domain="*"/>  
</cross-domain-policy> 
 

• 1
• 2
• 3
• 4

限制指定網站訪問，可以參考百度https://www.baidu.com/crossdomain.xml配置

<cross-domain-policy>
    <allow-access-from domain="*.baidu.com"/>
    <allow-access-from domain="*.bdstatic.com"/>
    <allow-http-request-headers-from domain="*.baidu.com" headers="*"/>
    <allow-http-request-headers-from domain="*.bdstatic.com" headers="*"/>
</cross-domain-policy>

• 1
• 2
• 3
• 4
• 5
• 6

如果檔案儲存在第三方平臺上，比如阿里雲OSS，就把crossdomain.xml放在bucket根目錄下

播放

這裡推薦使用第三方h5播放器ckplayer，整合完成後看下視訊請求

可以看到視訊先載入的m3u8格式的索引檔案，然後開始載入視訊，跟據所以檔案依次載入abc000.ts、abc001.ts、abc002.ts，這時候拖動視訊，視訊開始載入abc011.ts、abc012.ts、abc013.ts跳過了4~10的檔案，這就是m3u8的好處，按需載入