文件地址參考：https://docs.videojs.com/tutorial-layout.html

1、下載video.js

連結：http://www.jq22.com/jquery-info404

2、在頁面中引入css和js檔案

 <link rel="stylesheet" href="video/video-js.min.css"/>
  <script src="video/videojs-ie8.min.js"></script>
  <script src="video/video.min.js"></script>

3、html，可以有三種格式

<video id="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="{}">
    <source src="http://視訊地址格式1.mp4" type='video/mp4' />
    <source src="http://視訊地址格式2.webm" type='video/webm' />
    <source src="http://視訊地址格式3.ogv" type='video/ogg' />
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
 

4、設定自動播放

<script type="text/javascript">
    var myPlayer = videojs('example_video_1');
    videojs("example_video_1").ready(function(){
        var myPlayer = this;
        myPlayer.play();
    });
</script>

5、介紹

(1)、poster=‘**’播放初始圖

(2)、播放按鈕居中，可以加class樣式vjs-big-play-centered

6、注意事項

(1)、為動態載入的 HTML 元素設定 Video.js

如果你的 web 頁面或者應用是動態載入 video 標籤的（ajax，appendChild，等等）,這樣在頁面載入後這個元素是不存在的，那麼你會想要手動設定播放器而不是依靠 data-setup 屬性。要做到這一點，首先將 data-setup屬性從 video 標籤中移除掉，這樣在播放器初始化的時候就不會混亂了。接下來，執行下面的 javascript ，有時在 Video.js 載入後，有時是在 video 標籤被載入進 DOM 後。

videojs 方法中的第一個引數是你的 video 標籤的 ID，用你自己的代替。

第二個引數是一個選項物件。它允許你像設定 data-setup 屬性一樣設定額外的選項。

第三個引數是一個 'ready' 回撥。一旦 Video.js 初始化完成後，就會觸發這個回撥。

videojs("example_video_1", {}, function(){
  // Player (this) is initialized and ready.
});

7、方法

ready:

myPlayer.ready(function(){
    //在回撥函式中，this代表當前播放器，
    //可以呼叫方法，也可以繫結事件。
})

播放

myPlayer.play()

暫停

myPlayer.pause()

獲取播放進度

var time=myPlayer.currentTime();

設定播放進度

myPlayer.currentTime(120);

視訊持續時間，載入完成視訊才可以知道視訊時長，且在flash情況下無效

var howLongIsThis = myPlayer.duration();

緩衝，就是返回下載了多少

var whatHasBeenBuffered = myPlayer.buffered();

百分比的緩衝

var howMuchIsDownloaded = myPlayer.bufferedPercent();

聲音大小（0-1之間）

var howLoudIsIt = myPlayer.volume();

設定聲音大小

myPlayer.volume(0.5);

取得視訊的寬度（高度一樣）

var howWideIsIt = myPlayer.width();

設定視訊寬度

myPlayer.width(640);

設定大小

myPlayer.size(640,480);

全屏

myPlayer.enterFullScreen();

新增事件

durationchange
ended //播放結束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暫停
play  //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
  
var myFunc = 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);

一個頁面中有多個視訊，需要點選後觸發bootstrap 的模態窗，再彈出視訊

html

<a videohref="http://xxx.mp4" class="video_link"><img  src="../images/xxx.jpg"/></a>

JS

$(".video_link").click(function() {
    var myPlayer = videojs('my-video');
    var videoUrl = $(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();
});
// 模態窗消失時，關閉視訊    
$('#mymoda').on('hidden.bs.modal', function() {
    myPlayer.pause();
});

轉載自：http://www.jq22.com/jquery-info404