如何在视频暂停时显示vjs-big-play按钮？ [英] How can I make the vjs-big-play-button appear when the video is paused?

问题描述

我目前正在修补。

5.0更新

我们（好吧，这是我）在5.0中用 css更改。我们需要重新考虑使用这种方法（或者是否应该），但同时，添加这些样式应该这样做。

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

I am presently tinkering with video.js, an open source HTML5 video player. There is this big-play-button (button name) which is shown before the video is started. Upon clicking the button "play", it disappears until the page is refreshed and the video has reloaded.

I would like to modify the code so that the button re-appears when the video is paused.

解决方案

You can hide / show the big play button at any time using the VJS API, so no need to go about creating a new button. bigPlayButton.show() and bigPlayButton.hide() are what you're looking for. Here's an example that should get you on the right path:

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();
  });
});

Here's a working example.

UPDATE FOR 5.0

We (ok, it was me) broke it in 5.0 with a css change. We need to revisit getting this approach to work (or whether it should), but in the meantime, adding these styles should do it.

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

这篇关于如何在视频暂停时显示vjs-big-play按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！