[HTML5和Flash視頻播放器]Video.js 學習筆記(一 ) HLS庫:videojs-contrib-hls

 

DEMO地址：https://github.com/Tinywan/PHP_Experience

 

https://github.com/videojs/videojs-contrib-hls

 下載JS文件，直接使用

<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
  <source src="https://example.com/index.m3u8" type="application/x-mpegURL">
</video>
<script src="video.js"></script>
<script src="videojs-contrib-hls.min.js"></script>
<script>
var player = videojs('example-video'); player.play(); </script>

videojs-contrib-hls支持一堆HLS功能。如下是一些亮點：

• 視頻點播和實況播放模式
• 備份或冗餘流
• 中段質量切換
• AES-128段加密
• CEA-608字幕會自動翻譯成標準的HTML5 標題文字曲目
• In-Manifest WebVTT字幕自動翻譯成標準的HTML5字幕軌道
• 定時ID3元數據將自動翻譯成HTML5 metedata文本軌道
• 高度可定製的自適應比特率選擇
• 自動帶寬跟蹤
• 使用CORS支持跨域憑據
• 與video.js的緊密集成以及使用標準HTML API儘量多地展示的理念
• 流多個音軌並切換到那些音軌（參見docs文件夾）獲取信息
• 片斷MP4 中的媒體內容， 而不是MPEG2-TS容器格式​​。

方法：

獲取對象

var videoObj = videojs(「videoId」);

ready:

myPlayer.ready(function(){ //在回調函數中，this表明當前播放器， //能夠調用方法，也能夠綁定事件。 })

播放：

myPlayer.play();

暫停：

myPlayer.pause();

獲取播放進度：

var whereYouAt = myPlayer.currentTime();

設置播放進度：

myPlayer.currentTime(120);

視頻持續時間，加載完成視頻才能夠知道視頻時長，且在flash狀況下無效

var howLongIsThis = myPlayer.duration();

緩衝，就是返回下載了多少

var whatHasBeenBuffered = myPlayer.buffered();

百分比的緩衝

var howMuchIsDownloaded = myPlayer.bufferedPercent();

聲音大小（0-1之間）

var howLoudIsIt = myPlayer.volume();

設置聲音大小

myPlayer.volume(0.5);

取得視頻的寬度

var howWideIsIt = myPlayer.width();

設置寬度：

myPlayer.width(640);

獲取高度

var howTallIsIt = myPlayer.height();

設置高度：

myPlayer.height(480);

一步到位的設置大小：

myPlayer.size(640,480);

全屏

myPlayer.enterFullScreen();

離開全屏

myPlayer.enterFullScreen();

添加事件

durationchange ended //播放結束 firstplay fullscreenchange loadedalldata loadeddata loadedmetadata loadstart pause //暫停 play //播放 progress seeked seeking timeupdate volumechange waiting resize inherited var myFunc = function(){ // Do something when the event is fired };

事件綁定

myPlayer.on("ended", function(){ console.log("end", this.currentTime()); }); myPlayer.on("pause", function(){ console.log("pause") });

刪除事件

myPlayer.removeEvent(「eventName」, myFunc);

雖然文章說明在不支持html5的狀況下，會以flash播放，但在支持html5的firefox下播放mp4時，卻遇到很大的困難，雖然調用了flash，但一直沒法播放（不過我也一直懷疑個人firefox下的flash有問題，不知道是否是真的）。不過若是你遵從videojs的建議，放兩個格式的視頻，就不會有這個問題了。

另外video的寫法中還有專門針對flash的寫法，固然你也能夠用這個插件實現純粹的flash播放（只寫flash那部分就好，能夠保證統一的瀏覽效果，不過iOS的瀏覽器不兼容flash，這就要你本身進行判斷來處理

 

選項參數設置

---

 

如何使用，初始化

您能夠在播放器初始化時將選項對象傳遞給hls源處理程序。你能夠像你對​​video.js的其餘部分同樣傳遞選項：

// html5 for html hls
videojs(video, {html5: { hls: { withCredentials: true } }}); // or // flash for flash hls
videojs(video, {flash: { hls: { withCredentials: true } }}); // or

var options = {hls: { withCredentials: true; }}; videojs(video, {flash: options, html5: options});

資源

一些選項，例如withCredentials能夠傳遞給hls player.src

var player = videojs('some-video-id'); player.src({ src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8', type: 'application/x-mpegURL', withCredentials: true });

 

直接改變URL地址：

 $(function () { $("#form_button").click(function () { var msg = $("#msg"); stream_address = $('input[name="stream_address"] ').val(); console.log(stream_address); if (stream_address == "") { $('#stream_address ').css("border", "1px #ff0000 solid"); msg.text("請輸入媒體流地址"); msg.addClass("warning"); return false; } else { $('#stream_address').css("border", "1px #ff00ff solid"); msg.text("error"); msg.removeClass("warning"); } $('#stream_address_code ').html("\"" + stream_address + "\"");  player.src({ src:stream_address, type:"application/x-mpegURL" }); }); });

 

遇到的BUB、錯誤、解決方案！

---

 

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1

Nginx 配置文件修改跨域：

location /record { add_header Cache-Control no-cache; add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; add_header 'Access-Control-Allow-Headers' 'Range'; types{ application/dash+xml mpd; application/vnd.apple.mpegurl m3u8; video/mp2t ts; } alias /home/tinywan/video_recordings; }