1. 程式人生 > >video.js API 詳解

video.js API 詳解

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

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