小雕雕的家

前言：

超級難得我會來介紹有關播放影片的套件，畢竟在網站上播放串流的機會不是很高 

(我是說我的工作上啦)

這次會接觸到串流影片的播放是因為前陣子接了個 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 

<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);

其他更多的用法請參考官網的說明文件

http://docs.videojs.com/