如何在视频暂停时显示vjs-big-play按钮？

Question

我正在修补video.js,一个开源的HTML5视频播放器.在视频开始之前显示了这个大播放按钮(按钮名称).单击"播放"按钮后,它将消失,直到刷新页面并重新加载视频.

我想修改代码,以便在视频暂停时重新显示该按钮.

Answer 1

FWIW,在2017年1月,有人通过添加这个类进行了一次更改,显示暂停时的大播放按钮:vjs-show-big-play-button-on-pause

Answer 2

您可以随时使用VJS API隐藏/显示大播放按钮,因此无需创建新按钮.bigPlayButton.show()而且bigPlayButton.hide()你正在寻找.这是一个让你走上正确道路的例子:

var video = videojs('my-awesome-video');

video.on('pause', function() {
  this.bigPlayButton.show();

  // Now the issue is that we need to hide it again if we start playing
  // So every time we do this, we can create a one-time listener for play events.
  video.one('play', function() {
    this.bigPlayButton.hide();
  });
});

这是一个有效的例子.

5.0的更新

我们(好吧,这是我)在5.0中用css更改打破了它.我们需要重新考虑使用这种方法(或者是否应该),但与此同时,添加这些样式应该这样做.

.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;
}