videojs插件的參數解釋

原文：

初始化

<!-- vjs-big-play-centered可使大的播放按鈕居住，vjs-fluid可使視頻占滿容器 -->
<video id="myVideo" class="video-js vjs-big-play-centered vjs-fluid">
  <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>
</video>

 

var player = videojs(document.getElementById('myVideo'), {
  controls: true, // 是否顯示控制條
  poster: 'xxx', // 視頻封面圖地址
  preload: 'auto',
  autoplay: false,
  fluid: true, // 自適應寬高
  language: 'zh-CN', // 設置語言
  muted: false, // 是否靜音
  inactivityTimeout: false,
  controlBar: { // 設置控制條組件
    /* 設置控制條里面組件的相關屬性及顯示與否
    'currentTimeDisplay':true,
    'timeDivider':true,
    'durationDisplay':true,
    'remainingTimeDisplay':false,
    volumePanel: {
      inline: false,
    }
    */
    /* 使用children的形式可以控制每一個控件的位置，以及顯示與否 */
    children: [
      {name: 'playToggle'}, // 播放按鈕
      {name: 'currentTimeDisplay'}, // 當前已播放時間
      {name: 'progressControl'}, // 播放進度條
      {name: 'durationDisplay'}, // 總時間
      { // 倍數播放
        name: 'playbackRateMenuButton',
        'playbackRates': [0.5, 1, 1.5, 2, 2.5]
      },
      {
        name: 'volumePanel', // 音量控制
        inline: false, // 不使用水平方式
      },
      {name: 'FullscreenToggle'} // 全屏
    ]
  },
  sources:[ // 視頻源
      {
          src: '//vjs.zencdn.net/v/oceans.mp4',
          type: 'video/mp4',
          poster: '//vjs.zencdn.net/v/oceans.png'
      }
  ]
}, function (){
  console.log('視頻可以播放了',this);
});

 

controlBar組件的說明

playToggle, // 播放暫停按鈕 volumeMenuButton,// 音量控制 currentTimeDisplay,// 當前播放時間 timeDivider, // '/' 分隔符 durationDisplay, // 總時間 progressControl, // 點播流時，播放進度條，seek控制 liveDisplay, // 直播流時，顯示LIVE remainingTimeDisplay, // 當前播放時間 playbackRateMenuButton, // 播放速率，當前只有html5模式下才支持設置播放速率 fullscreenToggle // 全屏控制 

 

動態切換視頻

 var data = {

  src: 'xxx.mp4',
    type: 'video/mp4'
  };
  var player = videojs('myVideo', {...});
  player.pause();
  player.src(data);
  player.load(data);
  // 動態切換poster
  player.posterImage.setSrc('xxx.jpg');
  player.play();
 
  // 銷毀videojs
  //player.dispose();

 

設置語言（傳統開發，VUE開發）

傳統開發

<script src="//example.com/path/to/lang/es.js"></script>
<script src="//example.com/path/to/lang/zh-CN.js"></script>
<script src="//example.com/path/to/lang/zh-TW.js"></script>
 
<script>
var player = videojs('myVideo', {
    language: 'zh-CN' // 初始化時設置語言，立即生效
});
 
/* 動態切換語言
  使用這種方式進行動態切換不會立即生效，必須有所操作后才會生效。如播放按鈕，必須點擊一次播放按鈕后播放按鈕的提示文字才會改變  
 */
//player.language('zh-TW');
</script>

 

VUE開發

import Video from 'video.js'
/* 不能直接引入js，否則會報錯：videojs is not defined 
import 'video.js/dist/lang/zh-CN.js' */
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import video_en from  'video.js/dist/lang/en.json'
import 'video.js/dist/video-js.css'
 
Video.addLanguage('zh-CN', video_zhCN);
Video.addLanguage('en', video_en);

 

解決在iPhone中播放時自動全屏問題

視頻在微信點擊播放時，會以模態框彈出再播放。

解決辦法就是在video標簽中添加playsinline="true"屬性。

<video
    webkit-playsinline="true"
    playsinline="true"
    class="video-js vjs-big-play-centered vjs-fluid">
</video>

 

常用事件：

播放 this.play()

停止 – video沒有stop方法，可以用pause 暫停獲得同樣的效果

暫停 this.pause()

銷毀 this.dispose()

監聽 this.on(‘click‘,fn)

觸發事件this.trigger(‘dispose‘)

options參數：

autoplay

類型： boolean；

如果true/作為屬性存在，則在播放器准備就緒時開始播放。

controls

類型： boolean
確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。

width

類型： string|number
設置視頻播放器的顯示寬度（以像素為單位）。

heigh

類型： string|number
設置視頻播放器的顯示高度（以像素為單位）。

loop

類型： boolean
使視頻一結束就重新開始。

muted

類型： boolean
默認情況下會靜音任何音頻。

poster

類型： string
在視頻開始播放之前顯示的圖像的URL。這通常是視頻的框架或自定義標題屏幕。一旦用戶點擊“播放”，圖像就會消失。

preload

類型： string
建議瀏覽器是否應在加載元素后立即開始下載視頻數據。支持的值是：
‘auto’
立即開始加載視頻（如果瀏覽器支持）。某些移動設備不會預加載視頻，以保護用戶的帶寬/數據使用。這就是為什么這個價值被稱為’汽車’，而不是更具決定性的東西’true’。
這往往是最常見和推薦的值，因為它允許瀏覽器選擇最佳行為。
‘metadata’
僅加載視頻的元數據，其中包括視頻的持續時間和尺寸等信息。有時，元數據將通過下載幾幀視頻來加載。
‘none’
不要預加載任何數據。瀏覽器將等待用戶點擊“播放”開始下載。

 src

類型： string
要嵌入的視頻源的源URL。

Video.js特定的參數

aspectRatio

類型： string
將播放器置於流體模式，並在計算播放器的動態大小時使用該值。該值應表示比率 - 由冒號（例如"16:9"或"4:3"）分隔的兩個數字。

autoSetup

類型： boolean
阻止播放器為具有data-setup屬性的媒體元素運行autoSetup 。

注意：必須在與videojs.options.autoSetup = false videojs源加載生效的同一時刻全局設置。

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捆綁在一起。

組件參數

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。

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(‘播放結束了!‘); }); });