最近弄視頻直播,網上沒有全面的中文文檔,只好自己整理了一份詳細的api。Video.js是一款web視頻播放器,支持html5和flash兩種播放方式。更有自定義皮膚,插件,組件,語言還有豐富的選項配置。
入門使用
- 引入video.js和video-js.css
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
- 使用video標籤就像下面這樣:
<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對視頻進行一些控制或制定
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()
- 監聽 this.on(‘click‘,fn)
- 觸發事件this.trigger(‘dispose‘)
var options = {};
var player = videojs(‘example_video_1‘, options, function onPlayerReady() {
videojs.log(‘播放器已經準備好了!‘);
// In this context, `this` is the player that was created by Video.js.<br> // 注意,這個地方的上下文, `this` 指向的是Video.js的實例對像player
this.play();
// How about an event listener?<br> // 如何使用事件監聽?
this.on(‘ended‘, function() {
videojs.log(‘播放結束了!‘);
});
});
常用選項
autoplay : true/false 播放器準備好之後,是否自動播放 【默認false】
controls : true/false 是否擁有控制條 【默認true】,如果設爲false ,那麼只能通過api進行控制了。也就是說界面上不會出現任何控制按鈕
height: 視頻容器的高度,字符串或數字 單位像素 比如: height:300 or height:‘300px‘
width: 視頻容器的寬度, 字符串或數字 單位像素
loop : true/false 視頻播放結束後,是否循環播放
muted : true/false 是否靜音
poster: 播放前顯示的視頻畫面,播放開始之後自動移除。通常傳入一個URL
preload:預加載
‘auto‘ 自動
’metadata‘ 元數據信息 ,比如視頻長度,尺寸等
‘none‘ 不預加載任何數據,直到用戶開始播放纔開始下載
children: Array | Object 可選子組件 從基礎的Component組件繼承而來的子組件,數組中的順序將影響組件的創建順序哦。
options 選項
標準元素選項
這些選項中的每一個也可用作標準元素屬性 ; 因此,可以使用設置指南中列出的所有三種方式定義它們。通常,未列出默認值,因爲這是留給瀏覽器供應商的。
類型: boolean
如果true/作爲屬性存在,則在播放器準備就緒時開始播放。
注意:從iOS 10開始,Apple autoplay在Safari中提供支持。有關詳細信息,請參閱“新增功能。
類型: boolean
確定播放器是否具有用戶可以與之交互的控件。沒有控件,啓動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
類型: string|number
設置視頻播放器的顯示高度(以像素爲單位)。
類型: boolean
使視頻一結束就重新開始。
類型: boolean
默認情況下會靜音任何音頻。
類型: string
在視頻開始播放之前顯示的圖像的URL。這通常是視頻的框架或自定義標題屏幕。一旦用戶點擊“播放”,圖像就會消失。
類型: string
建議瀏覽器是否應在加載元素後立即開始下載視頻數據。支持的值是:
‘auto’
立即開始加載視頻(如果瀏覽器支持)。某些移動設備不會預加載視頻,以保護用戶的帶寬/數據使用。這就是爲什麼這個價值被稱爲’汽車’,而不是更具決定性的東西’true’。
這往往是最常見和推薦的值,因爲它允許瀏覽器選擇最佳行爲。
‘metadata’
僅加載視頻的元數據,其中包括視頻的持續時間和尺寸等信息。有時,元數據將通過下載幾幀視頻來加載。
‘none’
不要預加載任何數據。瀏覽器將等待用戶點擊“播放”開始下載。
類型: string
要嵌入的視頻源的源URL。
類型: string|number
設置視頻播放器的顯示寬度(以像素爲單位)。
Video.js特定的選項
undefined除非另有說明,否則默認情況下每個選項
類型: string
將播放器置於流體模式,並在計算播放器的動態大小時使用該值。該值應表示比率 - 由冒號(例如"16:9"或"4:3")分隔的兩個數字。
類型: boolean
阻止播放器爲具有data-setup屬性的媒體元素運行autoSetup 。
注意:必須在與videojs.options.autoSetup = falsevideojs源加載生效的同一時刻全局設置。
類型: Array|Object
此選項繼承自基Component類。
類型: boolean
何時true,Video.js播放器將具有流暢的大小。換句話說,它將擴展以適應其容器。
此外,如果元素具有"vjs-fluid",則此選項自動設置爲true。
類型: number
Video.js表示用戶通過"vjs-user-active"和"vjs-user-inactive"類以及"useractive"事件與玩家進行交互。
在inactivityTimeout決定了不活動的許多毫秒聲明用戶閒置之前是必需的。值爲0表示沒有inactivityTimeout,用戶永遠不會被視爲非活動狀態。
鍵入:string,默認值:瀏覽器默認值或’en’
與播放器中的一種可用語言匹配的語言代碼。這爲播放器設置了初始語言,但始終可以更改。
在Video.js中瞭解有關語言的更多信息。
類型: Object
自定義播放器中可用的語言。此對象的鍵將是語言代碼,值將是具有英語鍵和翻譯值的對象。
在Video.js中瞭解有關語言的更多信息
注意:通常,不需要此選項,最好將自定義語言傳遞給videojs.addLanguage()所有玩家!
類型: boolean
明確設置關聯技術選項的默認值。
類型: string
允許覆蓋Video.js無法播放媒體源時顯示的默認消息。
類型: Array
嚴格大於0的數字數組,其中1表示常速(100%),0.5表示半速(50%),2表示雙速(200%)等。如果指定,Video.js顯示控件(類vjs-playback-rate)允許用戶從選擇數組中選擇播放速度。選項以從下到上的指定順序顯示。
例如:
videojs('my-player', {
playbackRates: [0.5, 1, 1.5, 2]
});
類型: Object
這支持在初始化播放器時使用自定義選項自動初始化插件 - 而不是要求您手動初始化它們。
videojs('my-player', {
plugins: {
foo: {bar: true},
boo: {baz: false}
}
});
以上大致相當於:
var player = videojs('my-player');
player.foo({bar: true});
player.boo({baz: false});
雖然,由於plugins選項是對象,因此無法保證初始化順序!
有關Video.js插件的更多信息,請參閱插件指南。
類型: Array
一組對象,它們反映了本機元素具有一系列子元素的能力。這應該是帶有src和type屬性的對象數組。例如:
videojs('my-player', {
sources: [{
src: '//path/to/video.mp4',
type: 'video/mp4'
}, {
src: '//path/to/video.webm',
type: 'video/webm'
}]
});
使用元素將具有相同的效果:
<video ...>
<source src="//path/to/video.mp4" type="video/mp4">
<source src="//path/to/video.webm" type="video/webm">
</video>
類型: boolean
使技術人員有可能覆蓋玩家的海報並融入玩家的海報生命週期。當使用多個技術時,這可能很有用,每個技術都必須在播放新源時設置自己的海報。
輸入:Array,默認值:[‘html5’]
定義Video.js技術首選的順序。默認情況下,這意味着Html5首選技術。其他註冊的技術將在此技術之後按其註冊順序添加。
類型: string
允許覆蓋vtt.js的默認URL,該URL可以異步加載到polyfill支持WebVTT。
此選項將用於Video.js(即video.novtt.js)的“novtt”版本中。否則,vtt.js與Video.js捆綁在一起。
組件選項
Video.js播放器是一個組件。與所有組件一樣,您可以定義它包含的子項,它們出現的順序以及傳遞給它們的選項。
這是一個快速參考; 因此,有關Video.js中組件的更多詳細信息,請查看組件指南。
類型: Array|Object
如果Array- 這是默認值 - 這用於確定哪些子節點(按組件名稱)以及在播放器(或其他組件)上創建它們的順序:
// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
videojs('my-player', {
children: [
'bigPlayButton',
'controlBar'
]
});
該children選項還可以作爲傳遞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
}
}
});
類型: Object
可以通過組件名稱的低駝峯案例變體(例如controlBarfor ControlBar)爲組件提供自定義選項。這些可以嵌套在孫子關係的表示中。例如,要禁用全屏控件:
videojs('my-player', {
controlBar: {
fullscreenToggle: false
}
});
技術選擇
類型: Object
Video.js回放技術(即“技術”)可以作爲傳遞給該videojs功能的選項的一部分給予自定義選項。它們應該在技術名稱的小寫變體下傳遞(例如"flash"或"html5")。
swf
指定Video.js SWF文件在Flash技術位置的位置:
videojs('my-player', {
flash: {
swf: '//path/to/videojs.swf'
}
});
但是,更改全局默認值通常更合適:
videojs.options.flash.swf = ‘//path/to/videojs.swf’
html5
類型: boolean
只有技術支持Html5,此選項可以設置true爲強制觸摸設備的本機控件。
類型: boolean
可以設置爲false禁用本機音軌支持。最常用於videojs-contrib-hls。
類型: boolean
可以設置爲false強制模擬文本軌道而不是本機支持。該nativeCaptions選項也存在,但只是一個別名nativeTextTracks。
類型: boolean
可以設置爲false禁用本機視頻軌道支持。最常用於videojs-contrib-hls。
.