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)站上使用。
快速開始
感謝Fastly的杰出人士，任何人都可以使用免費(fèi)的CDN托管版Video.js。將這些標(biāo)簽添加到您的文檔中<head>
<link rel="stylesheet">
<script src="http://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 rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<!-- cdnjs -->
<link 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="http://vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="http://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 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="http://example.com/path/to/video.min.js"></script>
<script src="http://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使用技巧
https://www.awaimai.com/2053.html
