這裏簡單的對官方的英文參數列表做了一個簡單說明,並寫了一Jquery的適配調用
$(document).ready(function () {
var player = $("video[data-video='example_video_1']").videoJs({
/**
* 自動播放:true/false
* 參數類型:Boolean
**/
autoplay: false,
/**
* 是否顯示底部控制欄:true/false
* 參數類型:Boolean
**/
controls: true,
/**
* 視頻播放器顯示的寬度
* 參數類型:String|Number
* 例如:200 or "200px"
**/
width: 300,
/**
* 視頻播放器顯示的高度
* 參數類型:String|Number
* 例如:200 or "200px"
**/
height: 300,
/**
* 將播放器置於流體模式下,計算播放器動態大小時使用該值。
* 該值應該是比用冒號隔開的兩個數字(如“16:9”或“4:3”)。
* 參數類型:String
**/
//aspectRatio:"1:1",
/**
* 是否循環播放:true/false
* 參數類型:Boolean
**/
loop: false,
/**
* 設置默認播放音頻:true/false
* 參數類型:Boolean
**/
muted: false,
/**
* 建議瀏覽器是否在加載<video>元素時開始下載視頻數據。
* 預加載:preload
* 參數類型:String
* 參數值列表:
* auto:立即加載視頻(如果瀏覽器支持它)。一些移動設備將不會預加載視頻,以保護用戶的帶寬/數據使用率。這就是爲什麼這個值被稱爲“自動”,而不是更確鑿的東西
* metadata:只加載視頻的元數據,其中包括視頻的持續時間和尺寸等信息。有時,元數據會通過下載幾幀視頻來加載。
* none:
*/
preload: "metadata",
/**
* 視頻開始播放前顯示的圖像的URL。這通常是一個幀的視頻或自定義標題屏幕。一旦用戶點擊“播放”圖像就會消失
* 參數類型:String
**/
// poster:"",
/**
* 要嵌入的視頻資源url,The source URL to a video source to embed.。
* 參數類型:String
**/
// src:"",
/**
* 此選項從組件基類繼承。
* 參數類型:Array|Object
**/
// children:[],
/**
* 是否自適應佈局
* 播放器將會有流體體積。換句話說,它將縮放以適應容器。
* 如果<video>標籤有“vjs-fluid”樣式時,這個選項會自動設置爲true。
* 參數類型:Boolean
**/
fluid: false,
/**
* 閒置超時
* 值爲0表示沒有
* 參數類型:Number
**/
inactivityTimeout: 0,
/**
* 語言
* 參數類型:String
* 支持的語言在lang目錄下
*/
language: 'zh-CN',
/**
* 語言列表
* 參數類型:Object
* 自定義播放器中可用的語言
* 注:一般情況下,這個選項是不需要的,最好是通過自定義語言videojs。addlanguage().
*/
languages: "",
/**
* 是否使用瀏覽器原生的控件
* 參數類型:Boolean
*/
nativeControlsForTouch: false,
/**
* 是否允許重寫默認的消息顯示出來時,video.js無法播放媒體源
* 參數類型:Boolean
*/
notSupportedMessage: false,
/**
* 插件
* 參數類型:Object
*/
plugins: {},
/**
* 資源排序
* 參數類型:Boolean
* 在video.js 6,這個選項將默認爲true,
* videojs Flash將被要求使用Flash技術
*/
// sourceOrder:false,
/**
* 資源列表
* 參數類型:Array
*/
// sources: [{
// src: '//path/to/video.flv',
// type: 'video/x-flv'
// }, {
// src: '//path/to/video.mp4',
// type: 'video/mp4'
// }, {
// src: '//path/to/video.webm',
// type: 'video/webm'
// }],
/**
* 使用播放器的順序
* 參數類型:Array
* 下面的示例說明優先使用html5播放器,如果不支持將使用flash
*/
//techOrder: ['html5', 'flash'],
/**
* 允許重寫默認的URL vtt.js,可以異步加載到polyfill支持WebVTT。
* 此選項將在“novtt”建立video.js(即video。novtt js)。否則,vtt.js捆綁video.js。
* 參數類型:String
*/
// "vtt.js":""
}, function () {
});
console.log(player);
console.log(player.bigPlayButton.controlTextEl_)
});
入門級別參考,更多支持可以查看官方文檔。