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.注意事項

• 如果使用視訊流的方式，視訊播放中不能快進、不能跳轉，可能是後臺斷點續傳的問題。