【笔记】如何移除、新增、配置videojs的组件
in 前端 with 0 comment

【笔记】如何移除、新增、配置videojs的组件

in 前端 with 0 comment

昨天改了一个H5播放器的皮肤,新学到了移除组件新增组件Control布局配置的方法。趁着还记得赶紧记录下。

对于Component的具体用法可以看videoJs的官方文档:传送门

移除 vjs-big-play-button按钮

videoJs默认皮肤时有一个很丑的左上角居中的播放按钮,以往的操作都是使用display:none隐藏该元素或者用flex|绝对定位来居中它。

1.png

这次读了Component之后学到一个新技能来隐藏它:

function init () {
    // 初始化
    this.player = videoJS(element, options, function () {
        console.log('onReady')
    })
    // 新技能Get,通过removeChild来移除该组件
    this.player.removeChild('BigPlayButton')
}

新增组件

这里参考微博的H5播放器,它自定义了左上角的关闭按钮:

2.png

那我们如何来添加这个按钮呢,过去的做法是手动创建一个div然后css绝对定位,就像这样:

<button style="position: absolute;left: 10px;right: 10px" onclick="onClickEvent()">X</button>

现在学会了创建组件之后,可以用下面的方式来添加组件:

function create () {
    const Button = videoJS.getComponent('Button')
    const btnClose = new Button(this.player)
    // 添加css class样式
    btnClose.addClass('btn-close')
    // 删除css class样式
    btnClose.removeClass('vjs-control')
    btnClose.removeClass('vjs-button')
    // 绑定事件 类似JQuery的on
    btnClose.on('click', function () {
        console.log('click')
    })
    // 把组件绑定到播放器上
    this.player.addChild(btnClose)
}

总结:

  1. 通过addClassremoveClass来增减css样式
  2. 使用on来绑定事件,移动端点击使用tap,PC端使用click
  3. 最后需要通过videoJsElement.addChild(component)的方式来把组件添加到播放器上

Control布局配置

我在翻阅官方文档的过程中,发现可以通过修改controlBar来操作controls子组件的显示和排序。例子如下:

videoJs(xxx, {
    controls: true,
    controlBar: {
        children: [
            { name: 'playToggle' },
            { name: 'volumePanel', inline: false },
            { name: 'currentTimeDisplay' },
            { name: 'TimeDivider' },
            { name: 'progressControl' },
            { name: 'durationDisplay' }
        ]
    }
})

修改完之后的效果图:

3.png

所有的默认组件名称看这里:传送门

Comments are closed.