最近弄視頻直播敌土，網(wǎng)上沒有全面的中文文檔，只好自己整理了一份詳細(xì)的api运翼。Video.js是一款web視頻播放器返干，支持html5和flash兩種播放方式。更有自定義皮膚血淌，插件矩欠，組件，語言還有豐富的選項(xiàng)配置悠夯。
入門使用
- 引入video.js和video-js.css
<link rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
- 使用video標(biāo)簽就像下面這樣：
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://vjs.zencdn.net/v/oceans.png">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>
- videojs使用方式就是以類似的方式開始的癌淮，不過由于我們借助videojs對(duì)視頻進(jìn)行一些控制或制定
var player = videojs('example_video_1',{
muted: true,
controls : true/false,
height:300,
width:300,
loop : true,
// 更多配置.....
});
常用事件
- 播放 this.play()
- 停止 – video沒有stop方法，可以用pause 暫停獲得同樣的效果
- 暫停 this.pause()
- 銷毀 this.dispose()
- 監(jiān)聽 this.on(‘click‘,fn)
- 觸發(fā)事件this.trigger(‘dispose‘)
var options = {};
var player = videojs(‘example_video_1‘, options, function onPlayerReady() {
videojs.log(‘播放器已經(jīng)準(zhǔn)備好了!‘);
// In this context, `this` is the player that was created by Video.js.<br> // 注意疗疟，這個(gè)地方的上下文该默， `this` 指向的是Video.js的實(shí)例對(duì)像player
this.play();
// How about an event listener?<br> // 如何使用事件監(jiān)聽瞳氓？
this.on(‘ended‘, function() {
videojs.log(‘播放結(jié)束了!‘);
});
});
常用選項(xiàng)
autoplay : true/false 播放器準(zhǔn)備好之后策彤，是否自動(dòng)播放 【默認(rèn)false】
controls : true/false 是否擁有控制條 【默認(rèn)true】,如果設(shè)為false ,那么只能通過api進(jìn)行控制了栓袖。也就是說界面上不會(huì)出現(xiàn)任何控制按鈕
height: 視頻容器的高度，字符串或數(shù)字 單位像素 比如： height:300 or height:‘300px‘
width: 視頻容器的寬度, 字符串或數(shù)字 單位像素
loop : true/false 視頻播放結(jié)束后店诗，是否循環(huán)播放
muted : true/false 是否靜音
poster: 播放前顯示的視頻畫面裹刮，播放開始之后自動(dòng)移除。通常傳入一個(gè)URL
preload:預(yù)加載
‘a(chǎn)uto‘ 自動(dòng)
’metadata‘ 元數(shù)據(jù)信息 庞瘸，比如視頻長(zhǎng)度捧弃，尺寸等
‘none‘ 不預(yù)加載任何數(shù)據(jù)，直到用戶開始播放才開始下載
children: Array | Object 可選子組件 從基礎(chǔ)的Component組件繼承而來的子組件擦囊，數(shù)組中的順序?qū)⒂绊懡M件的創(chuàng)建順序哦违霞。
options 選項(xiàng)
標(biāo)準(zhǔn)元素選項(xiàng)
這些選項(xiàng)中的每一個(gè)也可用作標(biāo)準(zhǔn)元素屬性 ; 因此，可以使用設(shè)置指南中列出的所有三種方式定義它們瞬场。通常买鸽，未列出默認(rèn)值，因?yàn)檫@是留給瀏覽器供應(yīng)商的贯被。
autoplay
類型： boolean
如果true/作為屬性存在眼五，則在播放器準(zhǔn)備就緒時(shí)開始播放。
注意：從iOS 10開始彤灶，Apple autoplay在Safari中提供支持看幼。有關(guān)詳細(xì)信息，請(qǐng)參閱“新增功能幌陕。
controls
類型： boolean
確定播放器是否具有用戶可以與之交互的控件诵姜。沒有控件，啟動(dòng)視頻播放的唯一方法是使用autoplay屬性或通過Player API搏熄。
height
類型： string|number
設(shè)置視頻播放器的顯示高度（以像素為單位）茅诱。
loop
類型： boolean
使視頻一結(jié)束就重新開始。
muted
類型： boolean
默認(rèn)情況下會(huì)靜音任何音頻搬卒。
poster
類型： string
在視頻開始播放之前顯示的圖像的URL瑟俭。這通常是視頻的框架或自定義標(biāo)題屏幕。一旦用戶點(diǎn)擊“播放”契邀，圖像就會(huì)消失摆寄。
preload
類型： string
建議瀏覽器是否應(yīng)在加載元素后立即開始下載視頻數(shù)據(jù)。支持的值是：
‘a(chǎn)uto’
立即開始加載視頻（如果瀏覽器支持）坯门。某些移動(dòng)設(shè)備不會(huì)預(yù)加載視頻微饥，以保護(hù)用戶的帶寬/數(shù)據(jù)使用。這就是為什么這個(gè)價(jià)值被稱為’汽車’古戴，而不是更具決定性的東西’true’欠橘。
這往往是最常見和推薦的值，因?yàn)樗试S瀏覽器選擇最佳行為现恼。
‘metadata’
僅加載視頻的元數(shù)據(jù)肃续，其中包括視頻的持續(xù)時(shí)間和尺寸等信息黍檩。有時(shí)，元數(shù)據(jù)將通過下載幾幀視頻來加載始锚。
‘none’
不要預(yù)加載任何數(shù)據(jù)刽酱。瀏覽器將等待用戶點(diǎn)擊“播放”開始下載。
src
類型： string
要嵌入的視頻源的源URL瞧捌。
width
類型： string|number
設(shè)置視頻播放器的顯示寬度（以像素為單位）棵里。
Video.js特定的選項(xiàng)
undefined除非另有說明，否則默認(rèn)情況下每個(gè)選項(xiàng)
aspectRatio
類型： string
將播放器置于流體模式姐呐，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值殿怜。該值應(yīng)表示比率 - 由冒號(hào)（例如"16:9"或"4:3"）分隔的兩個(gè)數(shù)字。
autoSetup
類型： boolean
阻止播放器為具有data-setup屬性的媒體元素運(yùn)行autoSetup 曙砂。
注意：必須在與videojs.options.autoSetup = falsevideojs源加載生效的同一時(shí)刻全局設(shè)置稳捆。
children
類型： Array|Object
此選項(xiàng)繼承自基Component類。
fluid
類型： boolean
何時(shí)true麦轰，Video.js播放器將具有流暢的大小乔夯。換句話說，它將擴(kuò)展以適應(yīng)其容器款侵。
此外末荐，如果元素具有"vjs-fluid"，則此選項(xiàng)自動(dòng)設(shè)置為true新锈。
inactivityTimeout
類型： number
Video.js表示用戶通過"vjs-user-active"和"vjs-user-inactive"類以及"useractive"事件與玩家進(jìn)行交互甲脏。
在inactivityTimeout決定了不活動(dòng)的許多毫秒聲明用戶閑置之前是必需的。值為0表示沒有inactivityTimeout妹笆，用戶永遠(yuǎn)不會(huì)被視為非活動(dòng)狀態(tài)块请。
language
鍵入：string，默認(rèn)值：瀏覽器默認(rèn)值或’en’
與播放器中的一種可用語言匹配的語言代碼拳缠。這為播放器設(shè)置了初始語言墩新，但始終可以更改。
在Video.js中了解有關(guān)語言的更多信息窟坐。
languages
類型： Object
自定義播放器中可用的語言海渊。此對(duì)象的鍵將是語言代碼，值將是具有英語鍵和翻譯值的對(duì)象哲鸳。
在Video.js中了解有關(guān)語言的更多信息
注意：通常臣疑，不需要此選項(xiàng)，最好將自定義語言傳遞給videojs.addLanguage()所有玩家徙菠！
nativeControlsForTouch
類型： boolean
明確設(shè)置關(guān)聯(lián)技術(shù)選項(xiàng)的默認(rèn)值讯沈。
notSupportedMessage
類型： string
允許覆蓋Video.js無法播放媒體源時(shí)顯示的默認(rèn)消息。
playbackRates
類型： Array
嚴(yán)格大于0的數(shù)字?jǐn)?shù)組婿奔，其中1表示常速（100％）缺狠，0.5表示半速（50％）问慎，2表示雙速（200％）等。如果指定儒老，Video.js顯示控件（類vjs-playback-rate）允許用戶從選擇數(shù)組中選擇播放速度蝴乔。選項(xiàng)以從下到上的指定順序顯示记餐。
例如：
videojs('my-player', {
playbackRates: [0.5, 1, 1.5, 2]
});
plugins
類型： Object
這支持在初始化播放器時(shí)使用自定義選項(xiàng)自動(dòng)初始化插件 - 而不是要求您手動(dòng)初始化它們驮樊。
videojs('my-player', {
plugins: {
foo: {bar: true},
boo: {baz: false}
}
});
以上大致相當(dāng)于：
var player = videojs('my-player');
player.foo({bar: true});
player.boo({baz: false});
雖然，由于plugins選項(xiàng)是對(duì)象片酝，因此無法保證初始化順序囚衔！
有關(guān)Video.js插件的更多信息，請(qǐng)參閱插件指南雕沿。
sources
類型： Array
一組對(duì)象练湿，它們反映了本機(jī)元素具有一系列子元素的能力。這應(yīng)該是帶有src和type屬性的對(duì)象數(shù)組审轮。例如：
videojs('my-player', {
sources: [{
src: '//path/to/video.mp4',
type: 'video/mp4'
}, {
src: '//path/to/video.webm',
type: 'video/webm'
}]
});
使用元素將具有相同的效果：
<video ...>
<source src="http://path/to/video.mp4" type="video/mp4">
<source src="http://path/to/video.webm" type="video/webm">
</video>
techCanOverridePoster
類型： boolean
使技術(shù)人員有可能覆蓋玩家的海報(bào)并融入玩家的海報(bào)生命周期肥哎。當(dāng)使用多個(gè)技術(shù)時(shí)，這可能很有用疾渣，每個(gè)技術(shù)都必須在播放新源時(shí)設(shè)置自己的海報(bào)篡诽。
techOrder
輸入：Array，默認(rèn)值：[‘html5’]
定義Video.js技術(shù)首選的順序榴捡。默認(rèn)情況下杈女，這意味著Html5首選技術(shù)。其他注冊(cè)的技術(shù)將在此技術(shù)之后按其注冊(cè)順序添加吊圾。
vtt.js
類型： string
允許覆蓋vtt.js的默認(rèn)URL达椰，該URL可以異步加載到polyfill支持WebVTT。
此選項(xiàng)將用于Video.js（即video.novtt.js）的“novtt”版本中项乒。否則啰劲，vtt.js與Video.js捆綁在一起。
組件選項(xiàng)
Video.js播放器是一個(gè)組件檀何。與所有組件一樣呈枉，您可以定義它包含的子項(xiàng)，它們出現(xiàn)的順序以及傳遞給它們的選項(xiàng)埃碱。
這是一個(gè)快速參考; 因此猖辫，有關(guān)Video.js中組件的更多詳細(xì)信息，請(qǐng)查看組件指南砚殿。
children
類型： Array|Object
如果Array- 這是默認(rèn)值 - 這用于確定哪些子節(jié)點(diǎn)（按組件名稱）以及在播放器（或其他組件）上創(chuàng)建它們的順序：
// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
videojs('my-player', {
children: [
'bigPlayButton',
'controlBar'
]
});
該children選項(xiàng)還可以作為傳遞Object啃憎。在這種情況下，它用于提供options任何/所有孩子似炎，包括禁用它們false：
// This player's ONLY child will be the controlBar. Clearly, this is not the
// ideal method for disabling a grandchild!
videojs('my-player', {
children: {
controlBar: {
fullscreenToggle: false
}
}
});
${componentName}
類型： Object
可以通過組件名稱的低駝峰案例變體（例如controlBarfor ControlBar）為組件提供自定義選項(xiàng)辛萍。這些可以嵌套在孫子關(guān)系的表示中悯姊。例如，要禁用全屏控件：
videojs('my-player', {
controlBar: {
fullscreenToggle: false
}
});
技術(shù)選擇
${techName}
類型： Object
Video.js回放技術(shù)（即“技術(shù)”）可以作為傳遞給該videojs功能的選項(xiàng)的一部分給予自定義選項(xiàng)贩毕。它們應(yīng)該在技??術(shù)名稱的小寫變體下傳遞（例如"flash"或"html5"）悯许。
flash
swf
指定Video.js SWF文件在Flash技術(shù)位置的位置：
videojs('my-player', {
flash: {
swf: '//path/to/videojs.swf'
}
});
但是，更改全局默認(rèn)值通常更合適：
videojs.options.flash.swf = ‘//path/to/videojs.swf’
html5
nativeControlsForTouch
類型： boolean
只有技術(shù)支持Html5辉阶，此選項(xiàng)可以設(shè)置true為強(qiáng)制觸摸設(shè)備的本機(jī)控件先壕。
nativeAudioTracks
類型： boolean
可以設(shè)置為false禁用本機(jī)音軌支持。最常用于videojs-contrib-hls谆甜。
nativeTextTracks
類型： boolean
可以設(shè)置為false強(qiáng)制模擬文本軌道而不是本機(jī)支持垃僚。該nativeCaptions選項(xiàng)也存在，但只是一個(gè)別名nativeTextTracks规辱。
nativeVideoTracks
類型： boolean
可以設(shè)置為false禁用本機(jī)視頻軌道支持谆棺。最常用于videojs-contrib-hls。
