video.js自定义按钮

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,
        },
      },
 });
//=========================================================================//
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容