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

Posted 2023-05-08

【中文标题】视频暂停时如何使 vjs-big-play-button 出现？

【英文标题】：How can I make the vjs-big-play-button appear when the video is paused?

【发布时间】：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(); ;

【参考方案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 中被破坏了。我们可能应该修复这个方法，但我会添加一个更新的答案。