HTML5的網(wǎng)絡(luò)視頻播放器video.js的用法
video.js是一款基于HTML5的網(wǎng)絡(luò)視頻播放器。它支持HTML5和Flash視頻，以及YouTube和Vimeo（通過插件）。支持在桌面和移動(dòng)設(shè)備上播放視頻。這個(gè)項(xiàng)目從2010年中期開始，現(xiàn)已經(jīng)在40多萬個(gè)網(wǎng)站上使用。
vedio.js 是一款視頻播放插件，它會(huì)自動(dòng)檢測(cè)瀏覽器對(duì) HTML5 的支持情況，如果不支持 HTML5 則自動(dòng)使用 Flash 播放器。
快速開始
感謝Fastly的杰出人士，任何人都可以使用免費(fèi)的CDN托管版Video.js。將這些標(biāo)簽添加到您的文檔中<head>
<link href="//vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/5.19/video.min.js"></script>
有關(guān)要使用的最新版本的video.js和URL，請(qǐng)查看我們網(wǎng)站上的入門頁面。
在vjs.zencdn.netCDN托管版本的Video.js中，我們包含一個(gè)精簡(jiǎn)的Google Analytics（分析）像素，用于跟蹤從CDN加載的隨機(jī)抽樣（當(dāng)前為1％）的玩家。這使我們能夠（粗略地）看到哪些瀏覽器正在使用，以及其他有用的指標(biāo)，如操作系統(tǒng)和設(shè)備。如果您想停用分析功能，則可以在通過免費(fèi)CDN添加Video.js之前簡(jiǎn)單包含以下全局內(nèi)容：
<script>window.HELP_IMPROVE_VIDEOJS = false;</script>
或者，您可以通過從npm獲取Video.js ，從GitHub發(fā)布下載或通過unpkg或CDNjs等其他JavaScript CDN獲取Video.js。這些版本不包括Google Analytics跟蹤。
<!-- unpkg --> <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> <script src="https://unpkg.com/video.js/dist/video.js"></script> <!-- cdnjs --> <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video-js.css" ref="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video.js"></script>
接下來，使用video.js與創(chuàng)建<video>元素一樣簡(jiǎn)單，但是有一個(gè)附加的data-setup屬性，該屬性必須有個(gè)值{}，可以包含任何Video.js 選項(xiàng) - 只要確保它包含有效的JSON！
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video </a>
</p></video>當(dāng)頁面加載時(shí)，Video.js會(huì)找到這個(gè)元素并自動(dòng)設(shè)置一個(gè)播放器。
如果你不想使用自動(dòng)設(shè)置，你可以忽略data-setup屬性，并用videojs函數(shù)初始化<video>元素.
該videojs函數(shù)還接受一個(gè)options對(duì)象和一個(gè)回調(diào)，當(dāng)播放器準(zhǔn)備好時(shí)，回調(diào)函數(shù)將被調(diào)用。
var options = {};var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('Your player is ready!'); // In this context, `this` is the player that was created by Video.js.
this.play(); // How about an event listener?
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});language
videojs使用json對(duì)象來描述語言，對(duì)象的鍵為英語，對(duì)應(yīng)的值是目標(biāo)語言。翻譯在lang/目錄下，文件名稱是標(biāo)準(zhǔn)語言代碼，例如es.json是西班牙語.
除了video.js提供的獨(dú)立腳本，API支持通過addLanguage方法手動(dòng)定義新語言。其需要兩個(gè)參數(shù) 標(biāo)準(zhǔn)語言代碼, 語言定義對(duì)象：
videojs.addLanguage('es', {
Play: 'Reproducción',
Pause: 'Pausa', 'Current Time': 'Tiempo reproducido', 'Duration Time': 'Duración total', 'Remaining Time': 'Tiempo restante',
...
});如果對(duì)象包含以前翻譯過的字符串，addLanguage()將覆蓋現(xiàn)有的翻譯。然而，已經(jīng)本地化的文本將不會(huì)在生成之后更新。
使用
videojs的有多個(gè)翻譯在lang目錄下，為需要支持的每種語言添加lang腳。
<script src="//example.com/path/to/video.min.js"></script> <script src="//example.com/path/to/lang/es.js"></script>
除了向Video.js本身提供語言外，Player還可以通過以下languages選項(xiàng)為各個(gè)實(shí)例提供自定義語言支持：
// Provide a custom definition of Spanish to this player.videojs('my-player', {
languages: {
es: {
Play: 'Reproducir'
}
}
});設(shè)置播放器語言
播放器使用的語言可以通過language選項(xiàng)來設(shè)置
// Set the language to Spanish for this player.videojs('my-player', {
language: 'es'});該播放器的語言方法可用于在實(shí)例化后設(shè)置語言('es')。但是，這通常是沒有用的，因?yàn)樗桓乱呀?jīng)存在的文本。
確定播放器語言
播放器語言通過以下優(yōu)先級(jí)確定:
選項(xiàng)中指定的語言
在播放器元素上由
lang屬性指定的由最近的帶lang屬性的父元素指定的語言，向上包括<html>元素。
瀏覽器語言偏好設(shè)置;如果配置多個(gè)，則使用第一個(gè)語言。
英語
內(nèi)部語言選擇
語言代碼被認(rèn)為是不區(qū)分大小寫的（例如en-US== en-us）。
如果沒有與子代碼（例如en-us）匹配的語言代碼，則使用可用的匹配的主代碼（例如en）。
videojs使用技巧
初始化
Video.js初始化有兩種方式。
1.1 標(biāo)簽方式
一種是在<video>標(biāo)簽里面加上class="video-js"和data-setup='{}'屬性。
注意，兩者缺一不可。
剛開始的時(shí)候我覺得后面的值為空對(duì)象{}，不放也行，
導(dǎo)致播放器加載不出來，后來加上來就可以了。
1.2 JS方式
另外一種方法是通過JS初始化，格式：
var player = videojs('my-player');這樣有個(gè)要求，就是不能配置data-setup，并且需要傳入<video>的id。
當(dāng)然，如果不想一個(gè)個(gè)初始化，可以這樣：
(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默認(rèn)的播放按鈕在左上角，應(yīng)該是video.js開發(fā)人員認(rèn)為放中間會(huì)遮擋內(nèi)容，所以沒放中間。
不過我們常見的一般都在中間，比較符合習(xí)慣。
這是可以通過參數(shù)修改的，在<video>標(biāo)簽中加入vjs-big-play-centered類，就可以了。
像這樣：
class="video-js vjs-big-play-centered"
3 支持<audio>音樂標(biāo)簽
video.js 4.9開始支持<audio>標(biāo)簽，與video不同的是：播放audio時(shí)封面不會(huì)消失。
但是上面的播放框還是一直在的，配置方式和<video>標(biāo)簽一樣，也必須要配置data-setup參數(shù)。
4 禁止在iPhone safari中自動(dòng)全屏
方法如下，在<video>標(biāo)簽中加入playsinline參數(shù)，
<video playsinline ></video>
注意，在iOS10之前用的是webkit-playsinline。
5 暫停時(shí)顯示播放按鈕
video.js在未播放時(shí)，會(huì)顯示一個(gè)大的播放按鈕，上面我們提到如何讓他居中。
那么，如何在視頻暫停時(shí)也顯示這個(gè)播放按鈕呢？
有很多用JS的解決辦法，感覺都挺麻煩的。
其實(shí)用CSS就可以搞定了：
.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started .vjs-big-play-button { display: block;}是不是很輕便很簡(jiǎn)單 :）
6 播放按鈕變○圓形
video.js默認(rèn)的播放按鈕是圓角矩形，
我們一般更熟悉播放按鈕為圓形的：
那么怎么改呢？還是用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;
}因?yàn)樵瓉砭又械臅r(shí)候?qū)挾群透叨雀淖兞?，所?code class="hljs" style="box-sizing: inherit; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12px; padding: 0.3em; color: rgb(51, 51, 51); background: rgb(247, 247, 247); border-radius: 3px; display: inline; overflow-x: auto; line-height: 1.65; word-wrap: break-word; word-break: break-all;">margin的值也要相應(yīng)改變
7 點(diǎn)擊屏幕播放/暫停
這個(gè)是視頻播放的時(shí)候用得較多的功能，解決方法如下。
.video-js.vjs-playing .vjs-tech { pointer-events: auto;}pointer-events是CSS的一個(gè)屬性，用來控制鼠標(biāo)的動(dòng)作，具體可參考《CSS里的pointer-events屬性》。
8 重載視頻文件
總有那么一些情形，我們需要重新載入視頻文件。
比如，馬上播放剛上傳的文件。
例如這樣的標(biāo)簽：
<video id="example_video"> <source id="videoMP4" src="1.mp4" /></video><button id="reload">重載</button>
在video.js中，用現(xiàn)成的js方法就可以實(shí)現(xiàn)：
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 進(jìn)度顯示當(dāng)前播放時(shí)間
video.js默認(rèn)倒序顯示時(shí)間，也就是視頻播放的剩余時(shí)間。
要顯示當(dāng)前的播放時(shí)間，以及總共視頻時(shí)長(zhǎng)，加2行CSS解決：
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇
