videojs常用功能簡介
videojs常用功能簡介
video.js是一款基於HTML5的網路視訊播放器。它支援HTML5和Flash視訊，以及YouTube和Vimeo（通過外掛）。支援在桌面和移動裝置上播放視訊。下面開始我們對它的瞭解
一、先來看一個小demo
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引用videojs樣式和js -->
<link href="https://cdn.bootcss.com/video.js/7.5.4/video-js.min.css" rel="stylesheet">
<script src="
</head>
<body>
<!-- video-js 必須加，應用樣式 vjs-default-skin 預設樣式 vjs-big-play-centered讓播放按鈕居中 標籤中有controls或在js中設定了controls才會顯示播放按鈕和其他控制元件-->
<video class="video-js vjs-default-skin vjs-big-play-centered" data-setup="{}" id="my_video">
<source src="data/imooc.mp4" type="video/mp4">
</video>
</body>
<script>
var player = videojs('my_video',{controls: true,width: 500, height: 400,loop: true, autoplay: true},function(){// this指player物件
this.on('play',function(){
console.log('播放');
})
this.on('pause',function(){
console.log('暫停');
})
})
</script>
</html>
|
通過上面的demo不難看出，使用video.js與建立<video>元素一樣簡單，但是有一個附加的data-setup屬性，該屬性必須有個值{}，可以包含任何Video.js 選項 - 只要確保它包含有效的JSON！如果你不想使用自動設定，你可以忽略data-setup屬性，並用videojs函式初始化<video>元素.該videojs函式還接受一個options物件和一個回撥，當播放器準備好時，回撥函式將被呼叫。
二、videojs常用選項
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元件繼承而來的子元件，陣列中的順序將影響元件的建立順序哦。
三、videojs的options選項
3.1 標準元素選項：這些選項中的每一個也可用作標準元素屬性 ; 因此，可以使用設定指南中列出的所有三種方式定義它們。通常，未列出預設值，因為這是留給瀏覽器供應商的。
autoplay
型別： boolean
如果true/作為屬性存在，則在播放器準備就緒時開始播放。
controls
型別： boolean
確定播放器是否具有使用者可以與之互動的控制元件。沒有控制元件，啟動視訊播放的唯一方法是使用autoplay屬性或通過Player API。
height
型別： string|number
設定視訊播放器的顯示高度（以畫素為單位）。
loop
型別： boolean
使視訊一結束就重新開始。
muted
型別： boolean
預設情況下會靜音任何音訊。
poster
型別： string
在視訊開始播放之前顯示的影象的URL。這通常是視訊的框架或自定義標題螢幕。一旦使用者點選“播放”，影象就會消失。
preload
型別： string
建議瀏覽器是否應在載入元素後立即開始下載視訊資料。支援的值是：
‘auto’
立即開始載入視訊（如果瀏覽器支援）。某些移動裝置不會預載入視訊，以保護使用者的頻寬/資料使用。這就是為什麼這個價值被稱為’汽車’，而不是更具決定性的東西’true’。
這往往是最常見和推薦的值，因為它允許瀏覽器選擇最佳行為。
‘metadata’
僅載入視訊的元資料，其中包括視訊的持續時間和尺寸等資訊。有時，元資料將通過下載幾幀視訊來載入。
‘none’
不要預載入任何資料。瀏覽器將等待使用者點選“播放”開始下載。
src
型別： string
要嵌入的視訊源的源URL。
width
型別： string|number
設定視訊播放器的顯示寬度（以畫素為單位）。
3.2Video.js特定的選項
除非另有說明，否則預設情況下每個選項的值都是undefined。
aspectRatio
型別： string
將播放器置於流體模式，並在計算播放器的動態大小時使用該值。該值應表示比率 - 由冒號（例如"16:9"或"4:3"）分隔的兩個數字。
autoSetup
型別： boolean
阻止播放器為具有data-setup屬性的媒體元素執行autoSetup 。
注意：必須在與videojs源載入生效的同一時刻全域性設定videojs.options.autoSetup = false。
children
型別： Array|Object
此選項繼承自基Component類。
fluid
型別： boolean
何時true，Video.js播放器將具有流暢的大小。換句話說，它將擴充套件以適應其容器。
此外，如果元素具有"vjs-fluid"，則此選項自動設定為true。
inactivityTimeout
型別： number
Video.js表示使用者通過"vjs-user-active"和"vjs-user-inactive"類以及"useractive"事件與玩家進行互動。
在inactivityTimeout決定了不活動的許多毫秒宣告使用者閒置之前是必需的。值為0表示沒有inactivityTimeout，使用者永遠不會被視為非活動狀態。
language
鍵入：string，預設值：瀏覽器預設值或’en’
與播放器中的一種可用語言匹配的語言程式碼。這為播放器設定了初始語言，但始終可以更改。
在Video.js中瞭解有關語言的更多資訊。
languages
型別： Object
自定義播放器中可用的語言。此物件的鍵將是語言程式碼，值將是具有英語鍵和翻譯值的物件。
在Video.js中瞭解有關語言的更多資訊
注意：通常，不需要此選項，最好將自定義語言傳遞給videojs.addLanguage()所有玩家！
nativeControlsForTouch
型別： boolean
明確設定關聯技術選項的預設值。
notSupportedMessage
型別： string
允許覆蓋Video.js無法播放媒體源時顯示的預設訊息。
playbackRates
型別： Array
嚴格大於0的數字陣列，其中1表示常速（100％），0.5表示半速（50％），2表示雙速（200％）等。如果指定，Video.js顯示控制元件（類vjs-playback-rate）允許使用者從選擇陣列中選擇播放速度。選項以從下到上的指定順序顯示。
例如：
videojs('my-player', {
playbackRates: [0.5, 1, 1.5, 2]
});
plugins
型別： 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外掛的更多資訊，請參閱外掛指南。
sources
型別： 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>
techCanOverridePoster
型別： boolean
使技術人員有可能覆蓋玩家的海報並融入玩家的海報生命週期。當使用多個技術時，這可能很有用，每個技術都必須在播放新源時設定自己的海報。
techOrder
輸入：Array，預設值：[‘html5’]
定義Video.js技術首選的順序。預設情況下，這意味著Html5首選技術。其他註冊的技術將在此技術之後按其註冊順序新增。
vtt.js
型別： string
允許覆蓋vtt.js的預設URL，該URL可以非同步載入到polyfill支援WebVTT。
此選項將用於Video.js（即video.novtt.js）的“novtt”版本中。否則，vtt.js與Video.js捆綁在一起。
元件選項
Video.js播放器是一個元件。與所有元件一樣，您可以定義它包含的子項，它們出現的順序以及傳遞給它們的選項。
這是一個快速參考; 因此，有關Video.js中元件的更多詳細資訊，請檢視元件指南。
children
型別： 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
}
}
});
${componentName}
型別： Object
可以通過元件名稱的低駝峰案例變體（例如controlBarfor ControlBar）為元件提供自定義選項。這些可以巢狀在孫子關係的表示中。例如，要禁用全屏控制元件：
videojs('my-player', {
controlBar: {
fullscreenToggle: false
}
});
技術選擇
${techName}
型別： Object
Video.js回放技術（即“技術”）可以作為傳遞給該videojs功能的選項的一部分給予自定義選項。它們應該在技術名稱的小寫變體下傳遞（例如"flash"或"html5"）。
flash
swf
指定Video.js SWF檔案在Flash技術位置的位置：
videojs('my-player', {
flash: {
swf: '//path/to/videojs.swf'
}
});
但是，更改全域性預設值通常更合適：
videojs.options.flash.swf = ‘//path/to/videojs.swf’
html5
nativeControlsForTouch
型別： boolean
只有技術支援Html5，此選項可以設定true為強制觸控裝置的本機控制元件。
nativeAudioTracks
型別： boolean
可以設定為false禁用本機音軌支援。最常用於videojs-contrib-hls。
nativeTextTracks
型別： boolean
可以設定為false強制模擬文字軌道而不是本機支援。該nativeCaptions選項也存在，但只是一個別名nativeTextTracks。
nativeVideoTracks
型別： boolean
可以設定為false禁用本機視訊軌道支援。最常用於videojs-contrib-hls。
更詳細的文件請檢視videojs.com