video.js插件的问题还是比较多的,比如我想有个重播回放的功能,如何实现呢?这就得用到自定义按钮。
//==========================自定义重播按钮============================//
import videojs from 'video.js';
import 'videojs-flvjs';
class ReplayButton extends videojs.getComponent('Button') {
player;
constructor(player, options) {
super(player, options);
this.player = player;
// 设置按钮的可访问性文本
this.el_.innerText = '重播';
}
handleClick() {
// 暂停播放
this.player.pause();
// 将播放时间重置为 0
this.player.currentTime(0);
// 重新播放
this.player.play();
}
}
videojs.registerComponent('ReplayButton', ReplayButton);
...
this.player = videojs('my-video', {
controlBar: {
children: {
// 添加自定义重播按钮
replayButton: {
name: 'ReplayButton',
},
},
},
techOrder: ['html5', 'flvjs'],
poster: 'assets/img/poster.png',
flvjs: {
mediaDataSource: {
isLive: true,
cors: true,
withCredentials: false,
},
},
});
//=========================================================================//