轉自 http://sweeteason.pixnet.net/blog/post/42655502
--
前言：
超級難得我會來介紹有關播放影片的套件，畢竟在網站上播放串流的機會不是很高
(我是說我的工作上啦)
這次會接觸到串流影片的播放是因為前陣子接了個 case，想要在各平台上播放自家的串流影片
所謂各平台就是指.....Windows、Mac、iPhone、Android、平板上面也可以順利的播放串流影片
第一次接觸到串流的東東讓我做了好久的功課啊!!
首先第一步就是先搞懂串流的格式與種類，我這次接觸到的格式有兩種
1. HLS (HTTP Live Streaming)
Apple 推的，非 IOS 裝置使用上會有些限制，使用HLS (HTTP Live Streaming) 傳輸協定
副檔名是 .m3u8
在 html5 video 標籤上可以直接播放 .m3u8 的來源影片，當然只有 ios 限定
介紹看這裡：https://zh.wikipedia.org/wiki/HTTP_Live_Streaming?...
2. HDS (Http Dynamic Streaming)
Adobe 推的，網頁上要用 flash 播放，附檔名是 .f4m，IOS 可以用 UIWebView 播放
然後因為要跨平台播放，flash 一定被打槍，故最後我選擇使用 HLS 的串流在網頁上播
然後影片來源都是案主提供的，我也不會架串流 server ，所以這篇主要只在講怎麼在網頁上播影片
找了好幾個套件，最後最好用的是這個
Video.js :The Player Framework
video.js 我覺得好用的地方在於
1. 會自己判斷環境，如果是在電腦上就會用 flash 播放，在行動裝置就會使用 html5 播放
2. 除了基本播放的功能，還有很多延伸的套件可以安裝
(ex: 這次的目的，播放 hls 影片就要另外裝 plugin)
在使用上也遇到有些問題，例如:
1. 新版本好像有 bug (所以我暫時用舊版的)
2. HLS 串流不支援倍速播放，本來 .mp4 倍速播放正常，一切換 hls 倍速播放功能就不見了
但基本上來說這個套件還蠻有名，接下來來看要怎麼播放 HLS 串流影片
步驟：
1. 首先上官網下載 video.js 套件，或是引用 CDN
http://videojs.com/getting-started/
2. 到 video.js 的 plugin 頁面找到 HLS 播放的套件
可用的 pulgin 位址： http://videojs.com/plugins/
下載這個 plugin， cideojs-contrib-hls
3. html 很簡單如下：(太長會斷掉，所以折一下行)
<video id="videos" width="100%" height="481px" controls data-setup=""
class="video-js vjs-default-skin">
<source src="http://solutions.brightcove.com/jwhisenant/hls/apple/
bipbop/bipbopall.m3u8" type="application/x-mpegURL">
</video>
js 如下：
var player = videojs(document.getElementById("videos"),
{ "techOrder": ["hls","flash","html5"] }, function () {
});
這樣其實已經可以播放了，可以參考範例
http://videojs.github.io/videojs-contrib-hls/
但有那麼簡單我還寫個屁啊，當然是有幾個地方要解釋一下
1. controls 屬性是 html5 video 標籤的屬性，用來顯示影片控制列的，如果你不加就會只有預設 video.js 的播放，如下圖：
2. 上面那個 data-setup 屬性是 video.js 用來決定要引用哪個套件，或預設行為的參數
如果是空的就代表讓 video.js 自己決定，預設就只有 flash 播放
你可以給他空值，但一定要有這個屬性 不然會錯!
剛剛上面也講過這個套件會依照裝置不同自己轉換要用 flash 還是 html5 播放
如果你想限制只能使用 flash 播放就改成這樣
data-setup='{"techOrder": ["flash"]}'
想要強制使用 html5 播放就改成這樣 (講是這樣講，但我在個人電腦上要強制 html5 播放失敗了)
data-setup='{"techOrder": ["html5"]}'
如果是要播放 hls 就改成這樣
data-setup='{"techOrder": ["hls"]}'
可以參考這一頁官方說明 : http://docs.brightcove.com/en/perform/brightcove-p...
日後如有新的套件使用也是如法炮製
3. video type 一定要是 type="application/x-mpegURL"
再來最後是控制 hls 播放可能常用的一些程式碼：
基本上不管在切換成 flash or html5 程式碼都是一樣
害我當初還在找控制 flash 影片的程式碼是什麼
//宣告
//播放
player.play();
//暫停
player.pause();
//直接快轉到1200秒的地方
player.currentTime(1200);
其他更多的用法請參考官網的說明文件
--
留言列表
AI 
