插件下載鏈接：
鏈接:https://pan.baidu.com/s/1-l5-5h0obuMF0djNy6goGA 密碼:f0rw
使用方法
在頁(yè)面中引用video-js.cs樣式文件和video.js
<linkhref="video-js.css"rel="stylesheet"type="text/css">
<scriptsrc="video.js"></script>
設(shè)置flash路徑荷腊，Video.js會(huì)在不支持html5的瀏覽中使用flash播放視頻文件
<script>
????videojs.options.flash.swf?=?"video-js.swf";
</script>
html
poster="**"播放初始圖∑尬叮可使用三種視頻格式药蜻，根據(jù)所需要格式選擇對(duì)應(yīng)的瓷式。
<videoid="example_video_1"class="video-js?vjs-default-skin"controls?preload="none"width="640"height="264"
??????poster="http://video-js.zencoder.com/oceans-clip.png"
??????data-setup="{}">
????<sourcesrc="http://視頻地址格式1.mp4"type='video/mp4'/>
????<sourcesrc="http://視頻地址格式2.webm"type='video/webm'/>
????<sourcesrc="http://視頻地址格式3.ogv"type='video/ogg'/>
????<trackkind="captions"src="demo.captions.vtt"srclang="en"label="English"></track><!--?Tracks?need?an?ending?tag?thanks?to?IE9?-->
????<trackkind="subtitles"src="demo.captions.vtt"srclang="en"label="English"></track><!--?Tracks?need?an?ending?tag?thanks?to?IE9?-->
</video>
設(shè)置自動(dòng)播放將下面代碼加到html中代碼后面
<script?type="text/javascript">
????varmyPlayer?=?videojs('example_video_1');
????videojs("example_video_1").ready(function(){
????????varmyPlayer?=?this;
????????myPlayer.play();
????});
</script>
默認(rèn)情況下，大的播放按鈕是被定為在左上角的语泽，這樣就不會(huì)覆蓋視頻內(nèi)容蒿往。如果你想讓這個(gè)播放按鈕居中，你可以給你的?video?標(biāo)簽添加額外的?vjs-big-play-centered?樣式湿弦，比如：
<video?id="example_video_1"class="video-js?vjs-default-skin?vjs-big-play-centered"
??controls?preload="auto"width="640"height="264"
??poster="http://video-js.zencoder.com/oceans-clip.png"
??data-setup='{"example_option":true}'>
??...
</video>
如果你還對(duì)播放按鈕樣式不滿意可重新定義.video-js .vjs-big-play-button{/*這里的樣式重寫(xiě)*/}瓤漏。
為動(dòng)態(tài)加載的 HTML 元素設(shè)置 Video.js
如果你的 web 頁(yè)面或者應(yīng)用是動(dòng)態(tài)加載 video 標(biāo)簽的（ajax，appendChild颊埃，等等）,這樣在頁(yè)面加載后這個(gè)元素是不存在的蔬充，那么你會(huì)想要手動(dòng)設(shè)置播放器而不是依靠?data-setup?屬性。要做到這一點(diǎn)班利，首先將?data-setup?屬性從?video?標(biāo)簽中移除掉饥漫，這樣在播放器初始化的時(shí)候就不會(huì)混亂了。接下來(lái)罗标，運(yùn)行下面的 javascript 庸队，有時(shí)在 Video.js 加載后，有時(shí)是在 video 標(biāo)簽被加載進(jìn) DOM 后闯割，
videojs("example_video_1",?{},?function(){
? ? ? ? let _this = this
? ? ? ? // 監(jiān)聽(tīng)點(diǎn)擊播放時(shí)間
? ? ? _this.on("play", function() {
? ? ? ? ? ? console.log('播放了彻消，接下來(lái)干點(diǎn)什么？')
????????});?
? ? ? ? // 點(diǎn)擊暫停事件
? ? ? _this.on("pause", function() {?
? ? ? ? ? ? console.log('暫停了宙拉，接下來(lái)干點(diǎn)什么宾尚？')????
?????});
?});
videojs 方法中的第一個(gè)參數(shù)是你的 video 標(biāo)簽的 ID，用你自己的代替谢澈。
第二個(gè)參數(shù)是一個(gè)選項(xiàng)對(duì)象煌贴。它允許你像設(shè)置 data-setup 屬性一樣設(shè)置額外的選項(xiàng)。
第三個(gè)參數(shù)是一個(gè) 'ready' 回調(diào)锥忿。一旦 Video.js 初始化完成后牛郑，就會(huì)觸發(fā)這個(gè)回調(diào)。
你也可以傳入一個(gè)元素本身的引用來(lái)代替元素ID：
videojs(document.getElementById('example_video_1'),?{},?function()?{
??//?This?is?functionally?the?same?as?the?previous?example.
});
videojs(document.getElementsByClassName('awesome_video_class')[0],?{},?function()?{
??//?You?can?grab?an?element?by?class?if?you'd?like,?just?make?sure
??//?if?it's?an?array?that?you?pick?one?(here?we?chose?the?first).
});
如果您無(wú)法播放內(nèi)容敬鬓，您得確保使用了 正確的格式淹朋，你的 HTTP 服務(wù)器可能無(wú)法提供正確的 MIME類(lèi)型 的內(nèi)容
以下是網(wǎng)友的分享
var videoObj = videojs(“videoId”);
ready:
myPlayer.ready(function(){
????//在回調(diào)函數(shù)中灶似，this代表當(dāng)前播放器，
????//可以調(diào)用方法瑞你，也可以綁定事件酪惭。
})
播放：
myPlayer.play();
暫停：
myPlayer.pause();
獲取播放進(jìn)度：
varwhereYouAt?=?myPlayer.currentTime();
設(shè)置播放進(jìn)度：
myPlayer.currentTime(120);
視頻持續(xù)時(shí)間，加載完成視頻才可以知道視頻時(shí)長(zhǎng)者甲，且在flash情況下無(wú)效
varhowLongIsThis?=?myPlayer.duration();
緩沖春感，就是返回下載了多少
varwhatHasBeenBuffered?=?myPlayer.buffered();
百分比的緩沖
varhowMuchIsDownloaded?=?myPlayer.bufferedPercent();
聲音大小（0-1之間）
varhowLoudIsIt?=?myPlayer.volume();
設(shè)置聲音大小
myPlayer.volume(0.5);
取得視頻的寬度
varhowWideIsIt?=?myPlayer.width();
設(shè)置寬度：
myPlayer.width(640);
獲取高度
varhowTallIsIt?=?myPlayer.height();
一步到位的設(shè)置大小：
myPlayer.size(640,480);
全屏
myPlayer.enterFullScreen();
離開(kāi)全屏
myPlayer.enterFullScreen();
添加事件
durationchange
ended?//播放結(jié)束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause?//暫停
play??//播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize?inherited
varmyFunc?=?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);
一個(gè)頁(yè)面中有多個(gè)視頻虏缸，需要點(diǎn)擊后觸發(fā)bootstrap 的模態(tài)窗鲫懒，再?gòu)棾鲆曨l
建議方法是：
html:
<avideohref="http://xxx.mp4"class="video_link"><imgsrc="../images/xxx.jpg"/></a>
JS:
$(".video_link").click(function()?{
????varmyPlayer?=?videojs('my-video');
????varvideoUrl?=?$(this).attr("videohref");
????videojs("my-video",?{},?function()?{
????????window.myPlayer?=?this;
????????$("#mymoda?.video-con?#my-video?source").attr("src",?videoUrl);
????????myPlayer.src(videoUrl);
????????myPlayer.load(videoUrl);
????????myPlayer.play();
????});
????$(".click-modal").click();
});
//?模態(tài)窗消失時(shí)，關(guān)閉視頻????
$('#mymoda').on('hidden.bs.modal',?function()?{
????myPlayer.pause();
});
