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

Question

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

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

Answer 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