video.js的應用

一、引入css和js文件

<link href="./plugins/video-5.5.3/video-js.css" rel="stylesheet">
<script src="./plugins/video-5.5.3/video.js"></script>

二、HTML引入

<video
    id="my-player"
    class="video-js" // 必加
    controls //是否顯示控件，默認顯示
    preload="auto" //預加載
    poster="//vjs.zencdn.net/v/oceans.png" // 視頻加載前顯示的圖片
    data-setup='{}'> // 必加
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
    <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
    <p class="vjs-no-js">播放視頻須要啓用 JavaScript，推薦使用支持HTML5的瀏覽器訪問。
    To view this video please enable JavaScript, and consider upgrading to a web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">
        supports HTML5 video
    </a>
    </p>
</video>

三、js引入

var playerUrl = data.data;
var u = {type:"rtmp/flv",src:playerUrl};
var myPlayer =  videojs("my-player");  //初始化視頻
myPlayer.reset();
myPlayer.src(u);

【注】遇到的BUG、解決方案

（1）當頁面跳轉之後，video不會自動中止，能夠調用 player.dispose() 方法銷燬當前視頻

採用angularjs監聽路由變化的方法，監聽頁面跳轉，當頁面跳轉時銷燬video視頻

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    var myPlayer =  videojs("my-player");  //初始化視頻
    myPlayer.dispose();    //銷燬
});

（2）video.js加載之後的 <object></object> 中的 data="http://vjs.zencdn.net/swf/5.0.1/video-js.swf" ，若是本地訪問，連接會首先致。

解決辦法：改成本地的.swf文件。注意引入的時候要放在video.js後面

<script src="./plugins/video-5.5.3/video.js"></script>
<script language="javascript">
    videojs.options.flash.swf = './plugins/video-5.5.3/video-js.swf'
</script>

（3）chrome瀏覽器有時候不會提示是否容許flash加載的彈窗，flash不加載，視頻就沒法播放

解決辦法：判斷是否加載了flash player插件，彈窗提示安裝

function flashChecker() {
    var hasFlash = 0;　　　　 //是否安裝了flash
    var flashVersion = 0;　　 //flash版本

    if(document.all) {
        var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        if(swf) {
            hasFlash = 1;
            VSwf = swf.GetVariable("$version");
            flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
        }
    } else {
        if(navigator.plugins && navigator.plugins.length > 0) {
            var swf = navigator.plugins["Shockwave Flash"];
            if(swf) {
                hasFlash = 1;
                var words = swf.description.split(" ");
                for(var i = 0; i < words.length; ++i) {
                    if(isNaN(parseInt(words[i]))) continue;
                    flashVersion = parseInt(words[i]);
                }
            }
        }
    }
    return { f: hasFlash, v: flashVersion };
}

var fls = flashChecker();
var s = "";
if(!fls.f) {
    if(confirm("您的瀏覽器未安裝Flash插件，如今安裝？")) {
        window.location.href = "http://get.adobe.com/cn/flashplayer/";
    }
}