js插件---videojs中文文檔詳解

js插件---videojs中文文檔詳解

1、總結

一句話總結：

js插件網上都有不少參考資料，使用起來也很是簡單

 

2、lavarel中使用實例

 

1 <video id="example_video_1" class="video-js" controls preload="none" width="640px" height="264px" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}" style="margin: 0 auto;">
2     <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
3     <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
4     <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
5     <track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English">
6     <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English">
7     <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
8 </video>

 

 

 

 

3、videojs中文文檔詳解

轉自或參考：videojs中文文檔詳解
https://blog.csdn.net/a0405221/article/details/80923090

 

官方網站
下載最新版videojs

入門使用

查看DEMO | DEMO下載

1. 引入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>

2. 使用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>

3. videojs使用方式就是以相似的方式開始的，不過因爲咱們藉助videojs對視頻進行一些控制或制定

var player = videojs('example_video_1',{
    muted: true,
	controls : true/false,      
	height:300, 
	width:300,
	loop : true,
	// 更多配置.....
});

經常使用事件

1. 播放 this.play()
2. 中止 – video沒有stop方法，能夠用pause 暫停得到一樣的效果
3. 暫停 this.pause()
4. 銷燬 this.dispose()
5. 監聽 this.on(‘click‘,fn)
6. 觸發事件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 選項

標準元素選項
這些選項中的每個也可用做標準元素屬性 ; 所以，可使用設置指南中列出的全部三種方式定義它們。一般，未列出默認值，由於這是留給瀏覽器供應商的。

autoplay

類型： boolean
若是true/做爲屬性存在，則在播放器準備就緒時開始播放。

注意：從iOS 10開始，Apple autoplay在Safari中提供支持。有關詳細信息，請參閱「新增功能。

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
設置視頻播放器的顯示寬度（以像素爲單位）。

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()全部玩家！

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。 .