關於HLS,上篇咱們已經講過,它基於http協議,內容包括兩部分:m3u8描述文件,ts媒體文件。
它可以實現視頻直播,不過直播有點延遲,延遲大小與循環體的大小有關。我們將要利用它的循環體,來實現大視頻的分片下載播放。
問:怎麼將一個視頻分片得到m3u8文件?
答:利用ffmpeg工具。
問:那麼什麼是FFmpeg呢?
答:FFmpeg是一套可以用來記錄、轉換數字音頻、視頻,並且將其轉化爲流的開源程序。
它提供了錄製、轉換及流化音視頻的完整解決方案。包含非常先進的音視頻編碼解碼庫libavcodec。
FFmpeg是在Linux平臺下開發,但它可以在其他操作系統環境中編譯運行。FF代表 fast forward 。
問:FFmpeg的組成?
答:主要包含三部分:
第一部分是四個作用不同的工具軟件,分別是:
ffmpeg.exe,ffplay.exe,ffserver.exe和ffprobe.exe。
•ffmpeg.exe:音視頻轉碼、轉換器
•ffplay.exe:簡單的音視頻播放器
•ffserver.exe:流媒體服務器
•ffprobe.exe:簡單的多媒體碼流分析器
第二部分是可以供開發者使用的SDK,爲各個不同平臺編譯完成的庫。
如果說上面的四個工具軟件都是完整成品形式的玩具,那麼這些庫就相當於樂高積木一樣,我們可以根據自己的需求使用這些庫開發自己的應用程序。這些庫有:
•libavcodec:包含音視頻編碼器和解碼器
•libavutil:包含多媒體應用常用的簡化編程的工具,如隨機數生成器、數據結構、數學函數等功能
•libavformat:包含多種多媒體容器格式的封裝、解封裝工具
•libavfilter:包含多媒體處理常用的濾鏡功能
•libavdevice:用於音視頻數據採集和渲染等功能的設備相關
•libswscale:用於圖像縮放和色彩空間和像素格式轉換功能
•libswresample:用於音頻重採樣和格式轉換等功能
第三部分是整個工程的源代碼,無論是編譯出來的可執行程序還是SDK,都是由這些源代碼編譯出來的。
FFmpeg的源代碼由C語言實現,主要在Linux平臺上進行開發。FFmpeg不是一個孤立的工程,它還存在多個依賴的第三方工程來增強它自身的功能。在當前這一系列的博文/視頻中,我們暫時不會涉及太多源代碼相關的內容,主要以FFmpeg的工具和SDK的調用爲主。到下一系列我們將專門研究如何編譯源代碼並根據源代碼來進行二次開發。
下載與安裝FFmpeg
《FFmpeg官網》
配置環境變量
【使用】
在視頻所在的文件夾,輸入以下命令(我這裏有一個123.mp4的電影):
ffmpeg -i 80s.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 60 output/output.m3u8
初始視頻地址123.mp4
hls_time 10 表示切片視頻的時長,默認爲2
hls_list_size 表示 m3u8 文件記錄切片的數量,默認爲5.即只記錄最後5條切片,設置爲0表示記錄所有切片
漫長的等待.......
問:瀏覽器怎麼播放m3u8格式的視頻?
答:使用safari瀏覽器打開就可以播放
<!DOCTYPE hmtl>
<html>
<head>
<title>the5fire m3u8 test</title>
</head>
<body>
<video controls autoplay >
<source src="http://127.0.0.1:8080/frozen/video/finish/output.m3u8">
</video>
</body>
但是,在其他瀏覽器上卻:
因此我們得調成使用flash播放,這裏使用的是swfobject.js。《StrobeMediaPlayback.swf》
【拓展:swfobject.js】
首先,我們要爲SWF資源預留一個HTML結點。這個HTML結點內的所有內容都會在客戶端被Flash資源替換,當客戶端沒有安裝Flash播放器的時候,這些內容會顯示出來。這一特色在SEO以及對用戶體驗方面非常有必 要。
<!DOCTYPE hmtl>
<html>
<head>
<meta charset="UTF-8">
<title>m3u8播放器</title>
<script type="text/javascript" src="swfobject/src/swfobject.js" ></script>
</head>
<body>
<div id="player">
</div>
<script>
var flashvars = {
// M3U8 url, or any other url which compatible with SMP player (flv, mp4, f4m)
// escaped it for urls with ampersands
src: escape("http://127.0.0.1:8080/frozen/video/finish/output.m3u8"),
// url to OSMF HLS Plugin
//plugin_m3u8: "http://www.the5fire.com/static/demos/swf/HLSProviderOSMF.swf",
plugin_m3u8:"http://127.0.0.1:8080/frozen/video/finish/HLSProviderOSMF.swf"
};
var params = {
// self-explained parameters
allowFullScreen: true,
allowScriptAccess: "always",
bgcolor: "#000000"
};
var attrs = {
name: "player"
};
swfobject.embedSWF(
// url to SMP player
//"http://www.the5fire.com/static/demos/swf/StrobeMediaPlayback.swf",
"http://127.0.0.1:8080/frozen/video/finish/StrobeMediaPlayback.swf",
// div id where player will be place
"player",
// width, height
"800","485",
// minimum flash player version required
"10.2",
// other parameters
null, flashvars, params, attrs
);
</script>
</body>
</html>
大功告成!!!!