videojs外掛使用

小糖穿越火線發表於2019-10-31

videojs外掛使用

介紹：相容性強，開源免費，文件清晰，介面可定製等

使用整理：使用主要針對於移動端視訊播放，考慮的點：視訊顯示適配手機寬度；適配定義樣式；在微信端，安卓、ios視訊空間控制元件不同，定製等會自動被微信視訊控制元件覆蓋；播放過程中定製暫停/播放按鈕事件等；播放結束後定製重播、下一個視訊事件，讀秒播放下一個視訊

html

<video 
    id="videoPlayExecute"
    class="video-js vjs-default-skin video-label vjs-big-play-centered"
    controls
    preload="auto"
    webkit-playsinline="true"
    playsinline="true"
    x5-playsinline
    poster="./resource/images/test_pic.png"
>
    <source src="https://video.pearvideo.com/head/20190925/cont-1606116-14423410.mp4" type="video/mp4">
 </video>

自動播放，加一個 autoplay 就可以了，在微信移動端，是不允許視訊自動播放

 var options = {
    autoplay: false,// 自動播放：true/false
    controls: true, // 是否顯示底部控制欄：true/false
    aspectRatio: "16:9", // 將播放器置於流體模式下（如“16:9”或“4:3”）
    loop: false, // 是否迴圈播放:true/false
    muted: false, // 設定預設播放音訊：true/false
    preload: "auto",
    fluid: true, // 是否自適應佈局
    inactivityTimeout: 0, // 閒置超時
    nativeControlsForTouch: false, // 是否使用瀏覽器原生的控制元件
    language: 'zh-CN',
    controlBar: {
         children: [
             {name: 'playToggle'}, // 播放按鈕
             {name: 'currentTimeDisplay'}, // 當前已播放時間
             {name: 'progressControl'}, // 播放進度條
             {name: 'durationDisplay'}, // 總時間
             {
                  name: 'volumePanel', // 音量控制
                  inline: false, // 不使用水平方式
             },
             {name: 'FullscreenToggle'} // 全屏
         ]
     }
}

var myPlayer = videojs('videoPlayExecute', options, function () {
    // 準備好播放
    // 在回撥函式中，this代表當前播放器，
    var myPlayer = this;
    myPlayer.play();
    // 可以呼叫方法，也可以繫結事件。
    myPlayer.on('ended', function () {
         videoCoverLayer.fadeIn(600);
         myVideo.hide();
         // 播放結束
         if (cancelAutoplayHD.val() === '1') {
              cancelAutoplayBtn.hide();
         } else {
              cancelAutoplayBtn.show();
         }
         playVideoBtn.hide();
         replayVideoBtn.show();
         nextVideoBtn.show();
         countDownNum.html(5);
         var num = 5;
         function countDown() {
             if (num > 0) {
                 num--;
                 countDownNum.html(num);
             } else {
                 if (cancelAutoplayHD.val() !== '1') {
                     replayVideoBtn.hide();
                     nextVideoBtn.hide();
                     cancelAutoplayBtn.hide();
                     loadNextVideo(relatedFirstVideoUrl)
                 } else {
                     countDownNum.html(5);
                 }
                 clearInterval(timer);
             }
         }
  
         var timer = setInterval(function () {
             countDown();
         }, 1000);
     });

    // 監聽視訊播放開始
    myPlayer.on("play", function () {
        // 監聽視訊播放開始
      playVideoBtn.hide();
      pauseVideoBtn.hide();
    });

    // 監聽視訊播放暫停
    myPlayer.on("pause", function () {
       // 監聽視訊播放暫停
       playVideoBtn.hide();
       pauseVideoBtn.hide();
    });
});

css：修改按鈕樣式

/* video.js樣式修改 */
.video-js { /* 給.video-js設定字型大小以統一各瀏覽器樣式表現，因為video.js採用的是em單位 */
    font-size: 14px;
}

.video-js button {
    outline: none;
}

.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 { /* 視訊佔滿容器高度 */
    height: 100%;
    background-color: #161616;
}

.vjs-poster {
    background-color: #161616;
}

.video-js .vjs-big-play-button { /* 中間大的播放按鈕 */
    font-size: 2.7em;
    line-height: 1.5em;
    height: 1.5em;
    width: 1.5em;
    -webkit-border-radius: 2.2em;
    -moz-border-radius: 2.2em;
    border-radius: 2.2em;
    background-color: rgba(0, 0, 0, .3);
    border-width: 0;
    margin-top: -1em;
    margin-left: -0.9em;
}

.video-js.vjs-paused .vjs-big-play-button { /* 視訊暫停時顯示播放按鈕 */
    display: block;
}

.video-js.vjs-error .vjs-big-play-button { /* 視訊載入出錯時隱藏播放按鈕 */
    display: none;
}

.vjs-loading-spinner { /* 載入圓圈 */
    font-size: 2em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}

.video-js .vjs-control-bar { /* 控制條預設顯示 */
    display: flex;
}

.video-js .vjs-time-control {
    display: block;
}

.video-js .vjs-remaining-time {
    display: none;
}

.vjs-button > .vjs-icon-placeholder:before { /* 控制條所有圖示，圖示字型大小最好使用px單位，如果使用em，各瀏覽器表現可能會不大一樣 */
    font-size: 22px;
    line-height: 1.9;
}

.video-js .vjs-playback-rate .vjs-playback-rate-value {
    line-height: 2.4;
    font-size: 18px;
}

/* 進度條背景色 */
.video-js .vjs-play-progress {
    color: #dc0b21;
    /*background-color: #ffb845;*/
}

/*dc0b21*/
.video-js .vjs-progress-control .vjs-mouse-display {
    /*background-color: #ffb845;*/
}

.vjs-mouse-display .vjs-time-tooltip {
    padding-bottom: 6px;
    background-color: #dc0b21;
}

.video-js .vjs-play-progress .vjs-time-tooltip {
    display: none !important;
}

/* 控制檯背景色 */
.video-js .vjs-control-bar {
    background-color: rgba(43, 51, 63, .5);
}

優化是針對option，有些節點是不需要的，但是預設是建立了，所以會影響效率

children : {
    bigPlayButton : false,
    textTrackDisplay : false,
    posterImage: false,
    errorDisplay : false,
    controlBar : {
        captionsButton : false,
        chaptersButton: false,
        subtitlesButton:false,
        liveDisplay:false,
        playbackRateMenuButton:false
    }
}

autoplay，自動播放

<video autoplay ...>
or
{ "autoplay": true }

preload，預載入資源

<video preload ...>
or
{ "preload": "auto" }

poster，視訊縮圖

<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }

loop，自動迴圈

<video loop ...>
or
{ "loop": "true" }

width

<video width="640" ...>
or
{ "width": 640 }

height

<video height="480" ...>
or
{ "height": 480 }

Component Options

var player = videojs('video-id', {
  controlBar: {
    muteToggle: false
  }
});

其他元件：聲音，播放按鈕，字幕，時間，進度條等等，它們在html中的結構類似於這樣子：

Player
    PosterImage
    TextTrackDisplay
    LoadingSpinner
    BigPlayButton
    ControlBar
        PlayToggle
        FullscreenToggle
        CurrentTimeDisplay
        TimeDivider
        DurationDisplay
        RemainingTimeDisplay
        ProgressControl
            SeekBar
              LoadProgressBar
              PlayProgressBar
              SeekHandle
        VolumeControl
            VolumeBar
                VolumeLevel
                VolumeHandle
        MuteToggle

METHODS（引數）

autoplay
buffered
bufferedEnd
bufferedPercent
cancelFullScreen deprecated
controls
currentSrc
currentTime
currentType
dispose //清理
duration
ended //結束
error //錯誤
exitFullscreen //退出全屏
init
isFullScreen deprecated 廢棄
isFullscreen
language
load
loop //迴圈
muted 靜音
pause 暫停
paused //檢測是否暫停的狀態
play
playbackRate
poster //靜態圖片
preload
remainingTime //餘下時間
requestFullScreen deprecated
requestFullscreen
seeking
src
volume
addChild inherited
addClass inherited
buildCSSClass inherited
children inherited
contentEl inherited
createEl inherited
dimensions inherited
el inherited
enableTouchActivity inherited
getChild inherited
getChildById inherited
hasClass inherited
height inherited
hide inherited
id inherited
initChildren inherited
name inherited
off inherited
on inherited
one inherited
options inherited
player inherited
ready inherited
removeChild inherited
removeClass inherited
show inherited
trigger inherited
triggerReady inherited
width inherited

EVENTS（事件）

hide() 隱藏，show() 顯示，play()播放，pause(), el()獲取video元素，暫停幾本上就差不多了

durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

videojs的外掛機制

以在播放器的控制條中新增一個關閉按鈕為例，展示如果使用外掛實現我們自己想要的功能。

videojs.PowerOff = videojs.Button.extend({
    /* @constructor */
    init: function(player, options){
        videojs.Button.call(this, player, options);
        //onClick為預設事件，不需要人為邦定，否則會調兩次
        //this.on('click', this.onClick);
    }
});

/* This function is called when X button is clicked */
    videojs.PowerOff.prototype.onClick = function() {
        console.log('ddd')
                //這裡新增做你想要乾的事情
            };

             /* Create X button */
             var createPowerOffButton = function() {
               var props = {
                   className: 'vjs-off-button vjs-control',
                   innerHTML: '<div class="vjs-control-content">X</div>',
                   role: 'button',
                   'aria-live': 'polite',
                   tabIndex: 0
                 };

               return videojs.Component.prototype.createEl(null, props);
             };

            /* Add X button to the control bar */
            var X;
             videojs.plugin('PowerOff', function() {
               var options = { 'el' : createPowerOffButton() };
               X = new videojs.PowerOff(this, options);
               this.controlBar.el().appendChild(X.el());
             });

呼叫的時候，引數要加上外掛的名稱：

var player = videojs("example_video_1", {
      plugins : { PowerOff : {} }
}, function(){
    
});

給外掛按鈕加樣式，顯示到合適的位置

.vjs-default-skin .vjs-control.vjs-off-button {
     display: block;
     font-size: 1.5em;
     line-height: 2;
     position: relative;
     top: 0;
     float:right;
     left: 10px;
     height: 100%;
     text-align: center;
     cursor: pointer;
}

總結：對於單頁應用，videojs在隱藏時，內部的狀態就存在丟失的情況，會導致一系列的問題。解決的辦法就是播一次就建立一次。關閉就清理。經測試，這種模式就再也不會有錯誤了

video.js API 詳解

$(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_)
    });

感謝作者：

https://www.cnblogs.com/Renyi-Fan/p/11626583.html

VideoJs使用總結
2019-02-16
IDEJS
Headshot外掛如何使用？Headshot外掛使用教程
2020-12-27
fastadmin的【外掛管理】外掛使用教程
2020-12-05
AST
videojs
2018-10-23
IDEJS
Head 外掛使用
2021-06-26
PhotoSwipe外掛的使用
2016-12-06
個人使用外掛合集
2017-09-29
Eclipse安裝lombok外掛及外掛使用案例
2020-12-31
EclipseLombok
使用Autodesk Vault外掛嚮導輕鬆建立Vault外掛
2014-01-15
Flutter個人外掛使用整理
2020-02-14
Flutter
IDEA使用lombok外掛
2018-09-07
IdeaLombok
使用podspec建立iOS外掛
2018-12-26
iOS
Vue-router外掛使用
2020-11-21
Vue
burp外掛的使用
2020-10-11
storm kafka外掛使用案例
2017-04-29
ORMKafka
Sublime使用，安裝外掛
2017-01-04
我使用的brackets外掛
2015-02-22
Racket
[外掛擴充套件]違規資訊使用者舉報外掛
2019-05-11
套件
[需求建議]外掛外部url控制器直接使用外掛配置
2019-05-11
前端外掛之Datatables使用--下篇
2019-08-14
前端
前端外掛之Datatables使用--上篇
2019-08-09
前端
使用 VSCode Remote 外掛
2019-07-27
VSCodeREM
Windows下使用ideagit外掛
2018-08-12
WindowsIdeaGit
vscode外掛使用包
2018-12-25
VSCode
vim外掛 NERDTree安裝使用
2018-12-23
工具篇---xcode外掛使用
2018-11-01
XCode
Flutter 外掛的建立及使用
2020-12-03
Flutter
jQuery中cookie外掛如何使用
2017-09-24
jQueryCookie
我使用的 Sublime Text 外掛
2018-05-05
jstorm kafka外掛使用案例
2017-04-29
JSORMKafka
彈出框外掛layer使用
2017-05-31
MyBatis外掛使用–通用Mapper
2017-02-14
MyBatisAPP
jQuery外掛：jqGrid使用（二）
2015-03-30
jQuery
jQuery外掛：jqGrid使用（一）
2015-03-28
jQuery
Vim配置、外掛和使用技巧
2015-05-06
[外掛擴充套件]書架外掛（新外掛後臺）
2019-05-11
套件
外掛檔案上傳外掛 ajaxfileupload.js外掛
2012-12-01
JS
使用 Github Action 釋出 Flutter 外掛
2020-07-29
GithubFlutter

videojs外掛使用

videojs外掛使用

autoplay，自動播放

preload，預載入資源

poster，視訊縮圖

loop，自動迴圈

width

height

Component Options

METHODS（引數）

EVENTS（事件）

videojs的外掛機制

video.js API 詳解

相關文章