How can I make the vjs-big-play-button appear when the video is paused?

问题

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.

回答1:

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

回答2:

FWIW, in January 2017, someone made a change that displays the big-play-button on pause just by adding this class: vjs-show-big-play-button-on-pause

来源：https://stackoverflow.com/questions/25091972/how-can-i-make-the-vjs-big-play-button-appear-when-the-video-is-paused

标签

javascript

html5-video

video.js