1. 程式人生 > >video.js使用筆記(1)

video.js使用筆記(1)

這裡簡單的對官方的英文引數列表做了一個簡單說明,並寫了一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_) });

入門級別參考,更多支援可以檢視官方文件。