video.js API 詳解

videojs github官網地址
官方文檔地址

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

入門級別參考,更多支持可以查看官方文檔。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章