下載與介紹
Video.js是一款web視頻播放器，支持html5和flash兩種播放方式。更有自定義皮膚，插件，組件，語言還有豐富的選項配置。
官網下載地址：https://videojs.com/getting-started/
GitHub下載地址：https://github.com/videojs/video.js
入門使用
- 引入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="test1.mp4" type="video/mp4"> </video>
- .video.js的使用方式是以類似的方式開始的，不過我們能借助videojs對視頻進行一些控制或定制
//創建一個簡單的實例 var player = videojs('',{ muted: true, controls: true/false, height: 300, width: 300, loop: true, });
常用事件
- 播放 this.play()
- 停止，video.js沒有此方法，可以借助pause來達到同樣的效果
- 暫停 this.pause()
- 銷毀 this.dispose()
- 監聽 this.on('click',function(){})
- 觸發事件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 | 單位為px | 視頻容器的高度，字符串或數字 單位像素 |
| width | 單位為px | 視頻容器的寬度, 字符串或數字 單位像素 |
| loop | trule/false | 視頻結束之后是否循環播放 |
| muted | true/false | 是否靜音 |
| poster | url地址 | 播放前顯示的畫面類似封面圖 |
| preload | auto/metadata/none | 預加載:自動，元數據信息比如視頻大小，視頻尺寸等，不預加載任何數據，直到用戶開始播放才開始下載 |
| children | array/object | 可選子組件 從基礎的Component組件繼承而來的子組件，數組中的順序將影響組件的創建順序 |
options選項
標准元素選項
這些選項中的每一個也可用作標准元素屬性 ; 因此，可以使用設置指南中列出的所有三種方式定義它們。通常，未列出默認值，因為這是留給瀏覽器供應商的。
autoplay
類型：autoplay
如果true/作為存在，則播放器准備就緒時就開始播放
注意從IOS10 開始，Apple autoplay在Safari中提供支持。有關詳細信息，請參閱“新增功能。
controls
類型： boolean
確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
width
類型： string|number
設置視頻播放器的顯示寬度(以像素為單位)
height
類型：string|number
設置視頻播放器的顯示高度(以像素為單位)
loop
類型：boolean
使得視頻一播放完就重新開始
muted
類型：boolean
默認情況下會靜音任何音頻
poster
類型：string
在視頻開始播放之前顯示的圖像的URL。這通常是視頻的框架或自定義標題屏幕。一旦用戶點擊“播放”，圖像就會消失。
preload
類型：string
1. 建議瀏覽器是否應在加載元素后立即開始下載視頻數據。支持的值是：‘auto’
2. 立即開始加載視頻（如果瀏覽器支持）。某些移動設備不會預加載視頻，以保護用戶的帶寬/數據使用。這就是為什么這個價值被稱為’汽車’，而不是更具決定性的東西’true’。
3. 這往往是最常見和推薦的值，因為它允許瀏覽器選擇最佳行為。‘metadata’
4. 僅加載視頻的元數據，其中包括視頻的持續時間和尺寸等信息。有時，元數據將通過下載幾幀視頻來加載。'none’
5. 不要預加載任何數據。瀏覽器將等待用戶點擊“播放”開始下載。
src
類型：string
要載入的視頻源URL地址
video.js特定選項
undefined除非另有說明，否則默認情況下每個選項
aspectRatio
類型：string
將播放器置於流體模式，並在計算播放器的動態大小時使用該值。該值應表示比率 - 由冒號（例如"16:9"或"4:3"）分隔的兩個數字。
autoSetup
類型：boolean
阻止播放器為具有data-setup屬性的媒體元素運行autoSetup ，注意：必須在與videojs.options.autoSetup = falsevideojs源加載生效的同一時刻全局設置。
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()所有用戶！
navtiveControlsForTouch
類型：boolean
明確設置關聯技術選項的默認值
noSupportedMessage
類型：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]
});
plugin
類型：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', });
該children選項還可以作為傳遞Object，在這情況下，它用於options任何、所有children,包括禁用他們為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}
類型：boolean
可以通過組件名稱的低駝峰案例變體（例如controlBarfor controlBar）為組件提供自定義選項，這些可以嵌套在孫子關系的表示中，例如要禁用全屏控件
videojs('my-player', {
controlBar: {
fullscreenToggle: false
}
});
//依靠技術來選擇
${techName}
類型：Object
Video.js回放技術（即“技術”）可以作為傳遞給該videojs功能的選項的一部分給予自定義選項。它們應該在技術名稱的小寫變體下傳遞（例如"flash"或"html5"）。
flash
類型：string
swf，指定video.js SWF在flash文件中的位置
videojs('my-player', {
flash: {
swf: '//path/to/videojs.swf'
}
});
//但是，修改全局默認值通常更加合適
videojs.options.flash.swf = '//path/to/videojs.swf'
navtiveControlsForTouch
類型：boolean
只有支持HTML5，此選項可以設置為true為強制觸摸設備的本機控件
nativeAudioTracks
類型：boolean
可以設置為false禁用本機音軌的支持，最常用於videojs-contrib-his
navtiveTextTracks
類型：boolean
可以設置為false強制模擬文本軌道而不是本機支持。該navtiveCaptions選項也存在，但只是一個別名navtiveTextTracks
navtiveVideoTracks
類型：boolean
可以設置為false禁用本機視頻軌道支持，最常用於videojs-contrib-his。
Apple autoplay在Safari中提供支持。有關詳細信息，請參閱“新增功能。