vue video.js使用技巧

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>標簽一樣，也必須要配置data-setup參數。

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