video.js使用筆記(1)
阿新 • • 發佈:2019-02-12
這裡簡單的對官方的英文引數列表做了一個簡單說明,並寫了一Jquery的適配呼叫
/**
* Created by wuxp on 2017/4/26.
* Jquery video
*/
(function ($) {
if (videojs === undefined) {
console.error("請匯入video.js!");
return;
}
/**
* 僅支援選擇器選中的第一個元素
* @param options videoJs配置 具體請參考 http://docs.videojs.com/tutorial-options.html
* @param ready
* @return videoJs的原生物件
*/
$.fn.videoJs = function (options,ready) {
var video = this.eq(0)[0];
var player = videojs(video, options,ready);
return player;
};
})(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_)
});
入門級別參考,更多支援可以檢視官方文件。