videojs插件使用「建议收藏」

全栈程序员站长

发布于 2022-11-01 11:54:08

10.1K0

发布于 2022-11-01 11:54:08

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/203546.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年10月23日，如有侵权请联系 cloudcommunity@tencent.com 删除

https