Video.js使用及注意事项

Video标签是HTML5新的标签，主要是用于播放视频文件。现在去flash化，video.js相对而言简单易懂，使用方便。

---

1.导入jquery.js、video.js、video.css文件
2.在页面中添加video标签

<video onended="playOver()" id="my-video" class="video-js" controls 
    preload="auto"  height="400" poster="" data-setup="{}">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <source src="http://vjs.zencdn.net/v/oceans.webm"type="video/webm">
        <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
</video>

这里主要是source标签，是视频资源的地址，也可以接收流资源。poster属性是视频的封面图片。这里有一个onended事件，是播放结束之后的事件，这个下面再说。

3.常用的事件
我在项目中使用的事件主要是播放完毕事件，其他的都很简单，这里就不说了。播放结束事件就是onended，我这里结合播放完毕以后退出全屏操作。

//播放结束
function playOver() {
    exitFullscreen();
}
//退出全屏
function exitFullscreen()
{
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.oRequestFullscreen){
        document.oCancelFullScreen();
    }else if (document.webkitExitFullscreen){
        document.webkitExitFullscreen();
    }else{
        var docHtml  = document.documentElement;
        var docBody  = document.body;
        var videobox  = document.getElementById('my-video');
        docHtml.style.cssText = "";
        docBody.style.cssText = "";
        videobox.style.cssText = "";
        document.IsFullScreen = false;
    }
}

4.注意事项

• 如果使用视频流的方式，视频播放中不能快进、不能跳转，可能是后台断点续传的问题。