Video.js:最后显示大播放按钮

我想在视频结尾处显示大播放按钮,以便用户可以轻松地重播.

看来显示这个大的播放按钮(我读过的每个帖子都是为了隐藏它而不是显示它…),但对我来说情况并非如此……

我试图编辑以下函数(在video.dev.js文件中)但没有任何改变:

vjs.Player.prototype.onEnded = function(){
  if (this.options_['loop']) {
      this.currentTime(0);
      this.play();
  }
  else {  // I am not using loop mode
      this.bigPlayButton.show();
      this.pause();
  }
};

谢谢你的回复.

解决方法

有几种方法可以做到这一点.当视频以 API结尾时,您可以显示按钮:
videojs("myPlayer").ready(function(){
  var myPlayer = this;
  myPlayer.on("ended",function(){
    myPlayer.bigPlayButton.show();
  });
});

或者如果你想修改video.dev.js,你只需要取消注释执行相同操作的行:

vjs.BigPlayButton = vjs.Button.extend({
  /** @constructor */
  init: function(player,options){
    vjs.Button.call(this,player,options);

    if (!player.controls()) {
      this.hide();
    }

    player.on('play',vjs.bind(this,this.hide));
    // player.on('ended',this.show)); // uncomment this
  }
});

或者使用CSS,您可以在视频未播放(结束或暂停)时强制显示按钮:

.video-js.vjs-default-skin.vjs-paused .vjs-big-play-button {display:block !important;}

您看到的关于隐藏它的帖子可能是指video.js的第3版,因为最后显示了播放按钮.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...