video.js的应用

1、引入css和js文件

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

2、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>

3、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/";
    }
}