前言:

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

(我是說我的工作上啦)

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

//宣告

var player = videojs(document.getElementById("videos"), { "techOrder": ["hls","flash","html5"] }, function () {
});
//想要綁事件的話用 on,例如下面的例子
player.on('timeupdate', function () {
});
player.on('loadeddata', function () {
});

//播放

player.play();

//暫停

player.pause();

//直接快轉到1200秒的地方

player.currentTime(1200);


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

http://docs.videojs.com/


創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(0) 人氣()