1 初始化

Video.js初始化有兩種方式。

1.1 標籤方式

一種是在<video>標籤裡面加上class="video-js"和data-setup='{}'屬性。

注意，兩者缺一不可。

剛開始的時候我覺得後面的值為空物件{}，不放也行，

導致播放器載入不出來，後來加上來就可以了。

1.2 JS方式

另外一種初始化 video.js 的方法是通過JS，格式：

var player = videojs('my-player');

這樣有個要求，就是不能配置data-setup，並且需要傳入<video>的id。

當然，如果不想一個個初始化，可以這樣：

(function(){
    var videos = document.getElementsByTagName('video');
    for(i=0; i<videos.length; i++) {
        var video = videos[i];
        if(video.className.indexOf('video-js') > -1) {
            videojs(video.id).ready(function(){
            });
        }
    }
})();
 

2 播放按鈕居中

video.js預設的播放按鈕在左上角，應該是 video.js 開發人員認為放中間會遮擋內容，所以沒放中間。

不過我們常見的一般都在中間，比較符合習慣。

這是可以通過引數修改的，在<video>標籤中加入vjs-big-play-centered類，就可以了。

像這樣：

class="video-js vjs-big-play-centered"

3 支援<audio>音樂標籤

video.js 4.9開始支援<audio>標籤，與video不同的是：播放audio時封面不會消失。

但是上面的播放框還是一直在的，配置方式和<video>

4 禁止在iPhone safari中自動全屏

方法如下，在<video>標籤中加入playsinline引數，

<video playsinline ></video>

注意，在iOS10之前用的是webkit-playsinline。

5 暫停時顯示播放按鈕

video.js 在未播放時，會顯示一個大的播放按鈕，上面我們提到如何讓他居中。

那麼，如何在視訊暫停時也顯示這個播放按鈕呢？

有很多用JS的解決辦法，感覺都挺麻煩的。

其實用CSS就可以搞定了：

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}
 

是不是很輕便很簡單 :）

6 播放按鈕變○圓形

video.js 預設的播放按鈕是圓角矩形，

我們一般更熟悉播放按鈕為圓形的：

那麼怎麼改呢？還是用CSS來解決。

.video-js .vjs-big-play-button{
    font-size: 2.5em;
    line-height: 2.3em;
    height: 2.5em;
    width: 2.5em;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background-color: #73859f;
    background-color: rgba(115,133,159,.5);
    border-width: 0.15em;
    margin-top: -1.25em;
    margin-left: -1.75em;
}
/* 中間的播放箭頭 */
.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
}
/* 載入圓圈 */
.vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}

因為原來居中的時候寬度和高度改變了，所以margin的值也要相應改變

7 點選螢幕播放/暫停

這個是視訊播放的時候用得較多的功能，解決方法如下。

.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
}

pointer-events是CSS的一個屬性，用來控制滑鼠的動作，具體可參考《CSS裡的pointer-events屬性》。

8 過載視訊檔案

總有那麼一些情形，我們需要 video.js 重新載入視訊檔案。

比如，立即播放剛上傳的檔案。

例如這樣的標籤：

<video id="example_video">
  <source id="videoMP4" src="1.mp4" />
</video>
<button id="reload">過載</button>

在video.js中，用現成的js方法就可以實現：

var video = document.getElementById('example_video');
var source = document.getElementById('videoMP4');
$("#reload").click(function() {
    video.pause()
    source.setAttribute('src', '2.mp4');
    video.load();
    video.play();
});

或者：

var video = document.getElementById('example_video');
$("#reload").click(function() {
    video.pause()
    video.setAttribute('src', '2.mp4');
    video.load();
    video.play();
});

9 進度顯示當前播放時間

video.js 預設倒序顯示時間，也就是視訊播放的剩餘時間。

要顯示當前的播放時間，以及總共視訊時長，加2行CSS解決：

.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}

參考地址：

1. 1. http://codepen.io/davatron5000/pen/LskGD
   2. Video.js 4.9 - Now <audio> can join the party!
   3. 在網站中嵌入VideoJs視訊播放器
   4. 如何禁止 iPhone Safari 視訊自動全屏？
   5. New <video> Policies for iOS
   6. Video.js Show play button only when paused
   7. Reloading video.js player after changing source using jquery
   8. Show the current time of the video, instead of the remaining time on videojs