视频暂停时如何使 vjs-big-play-button 出现？答案

【问题标题】：How can I make the vjs-big-play-button appear when the video is paused?视频暂停时如何使 vjs-big-play-button 出现？
【发布时间】：2014-09-25 08:24:25
【问题描述】：

我目前正在修改video.js，一个开源 HTML5 视频播放器。在视频开始之前会显示这个大播放按钮（按钮名称）。点击按钮“播放”后，它会消失，直到页面刷新并重新加载视频。

我想修改代码，让按钮在视频暂停时重新出现。

【问题讨论】：

我试过这个：vjs.BigPlayButton = vjs.Button.extend(); vjs.BigPlayButton.prototype.createEl = function(){ return vjs.Button.prototype.createEl.call(this, 'div', { className: 'vjs-big-play-button', innerHTML: '<span aria-hidden="true"></span>', 'aria-label': 'play video' }); }; vjs.BigPlayButton.prototype.onClick = function(){ this.player_.play(); };

标签： javascript html5-video video.js

【解决方案1】：

FWIW，2017 年 1 月，某人 made a change 只需添加此类即可在暂停时显示大播放按钮：vjs-show-big-play-button-on-pause

【讨论】：

感谢您的提示！这个库的文档最差。
这应该是我接受的答案。我已经挖掘了这些信息，但从未在 videojs 找到过，非常感谢。

【解决方案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();
  });
});

这是working example。

5.0 更新

我们（好吧，是我）在 5.0 中用css change 打破了它。我们需要重新考虑让这种方法发挥作用（或者是否应该），但与此同时，添加这些样式应该可以做到。

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

【讨论】：

看起来它在 Video.js 5.0 styles 中被破坏了。我们可能应该修复这个方法，但我会添加一个更新的答案。