HTML5影片播放外掛程式video.js介紹

video.js是一款很流行的html5影片播放外掛。很適合在行動端播放影片(如微信網頁)，功能強大，且支援降級到flash,相容ie8。官網：http://videojs.com/ git&demo ：http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

controls表示控制條，prload：預先載入，poster表示最初的顯示的圖片。 data-set支援用json來設定一些參數。 source不用說了，track指的是字幕。

這樣子就出來了，但是在實際中我們還有其他需求。

需要應用novtt的js，在demo的alt檔中。這樣視訊控制條中就不會出現字母的選擇。當然你不再需要頁面中的track元素了。

 <link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=stylesheet /><script src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>

開始用css自己設置，發現怎麼都沒有效果。視訊元素不同於一般的元素，需要透過設定內在元素的比率來做到響應式的寬高。 video.js提供了兩種方式。

js：設定一個fluid為true。

 var player = videojs('video', { fluid: true }, function () { console.log('Good to go!'); this.play(); // if you don't trust autoplay for some reason } )

但這個還需要為video元素設定一個起始的寬高，不然開始的圖片看不見。

css：可以直接加入樣式。有三種.vjs-fluid,.vjs-4-3,.vjs-16-9 第一種它會自動計算，後面兩種指定比率。 樣式也需要設定起始寬高才能顯示圖片

 <video id=video class=video-js vjs-default-skin vjs-fluid poster=http://vjs.zencdn.net/v/oceans.png width=375 height=200 controls preload=none data-setup=' { html5 : { nativeTextTracks : false } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> 播放影片需要啟用JavaScript，推薦使用<a href=http://videojs.com/html5-video-support/ target=_blank>支援HTML5</ a>的瀏覽器存取。 </p> </video>

事件關注：

我們大致關注開始，暫停，結束這三個事件

 var player = videojs('video', { }, function () { console.log('Good to go!'); //this.play(); // if you don't trust autoplay for some reason }) ; player.on('play', function () { console.log('開始/恢復播放'); }); player.on('pause', function () { console.log('暫停播放'); }); player.on('ended', function () { console.log('結束播放'); });

還有更新事件：

 player.on('timeupdate', function() { console.log(player.currentTime()); });

可以透過判斷當前時間和總時間是否相等來判斷影片是否結束：

 player.on('timeupdate', function () { // 如果currentTime() === duration()，則影片已播放完畢if (player.duration() != 0 && player.currentTime() === player .duration()) { // 播放結束} });

有前輩指出在ended事件在安卓設備上沒有正確觸發(先備著)。

預設的iis MIME設定是沒有增加mp4類型的，會出現本地播放沒有問題，但是到了伺服器上就出404錯誤。這需要在iis中設定MIME：

flv格式是加入關聯副檔名：.flv，內容類型：application/octet-stream

f4v格式是副檔名：.f4v，內容類型：application/octet-stream

mp4格式為​​副檔名：.mp4，內容類型：video/mp4

ogv格式為副檔名：.ogv ，內容類型：video/ogg

webm格式是副檔名：.webm，內容類型：video/webm

設定完重啟iis才能生效。

官方給了一個codepen的位址http://codepen.io/heff/pen/EarCt可以編輯玩。 主要是播放按鈕，控制條和進度條。預設就是上面那樣。

還有這款：http://codepen.io/zanechua/pen/GozrNe SublimeVideo

Playback技術用來在瀏覽器或外掛程式中播放影片或音訊文件，如果是h5會使用video或audio元素，如果是flash，會定義一個flash播放器。不只flash，還支援Silverlight、Quicktime等技術播放。可以在元素中直接定義data-setup。指定支援的技術。

 <video data-setup='{techOrder: [html5, flash, other supported tech]}'

或使用JavaScript：

 videojs(videoID, { techOrder: [html5, flash, other supported tech]});

這裡預設的規則是，會用第一項技術去播放，不行再用後面的選項。例如上方html5寫在第一位，就會用html5播放所有的影片。如果我們想flash優先，放在前面即可：

 data-setup='{ techOrder: [flash,html5] }'

在頁面元素中你會發現，video.js給了我們使用的flash物件。

給video元素加上autoplay屬性，或是在js中加入autoplay:true

 <video id=video autoplay poster=/images/bk.png width=375 height=200 controls preload=none > </video>

或

 var player = videojs('video', { autoplay:true }, function () { console.log('Good to go!'); //this.play(); // 保險你也可以主動呼叫play() });

自動播放總是讓人討厭，反之就是刪除autoplay屬性或設定為false。

其他：

video.js支援擴充插件，用起來很方便。

 //定義一個插件function examplePlugin(options) { this.on('play', function (e) { console.log('playback has started!'); }); } //註冊videojs.plugin('examplePlugin' , examplePlugin); // 使用player.examplePlugin({ exampleOption: true });

插件內部可以直接呼叫播放器的api。 有一個playlist的插件可以研究下，如過你需要播放清單。 https://github.com/brightcove/videojs-playlist 以及http://videojs.com/advanced/ 有這樣的效果：

以上所述是小編給大家介紹的HTML5影片播放外掛video.js介紹，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！