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 clicking the button "play", it disappears until the page is refreshed and the video has reloaded.

Example

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

I tried this: `vjs.BigPlayButton = vjs.Button.extend(); vjs.BigPlayButton.prototype.createEl = function(){ return vjs.Button.prototype.createEl.call(this, 'div', { className: 'vjs-big-play-button', innerHTML: '', 'aria-label': 'play video' }); }; vjs.BigPlayButton.prototype.onClick = function(){ this.player_.play(); };` — , Aug 02 '14 at 05:38

score 30 · Answer 1 · answered Jul 27 '17 at 17:10

30

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

answered Jul 27 '17 at 17:10

Pete

557
1
4
18

5

Thanks for the tip! This library has the worst documentation. – JCraine Nov 03 '20 at 14:35
This should me the accepted answer. I have dug for this info and never located at videojs, so much apprecaited. – Woody Sep 03 '21 at 13:32
Big thanks! This still works in v8.0.4, march 2023. – Cristian Vasuica Mar 09 '23 at 06:02

Matt McClure · Accepted Answer · 2016-01-06T05:57:22.007

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

Looks like it was broken in Video.js 5.0 [styles](https://github.com/videojs/video.js/blob/9e3a7b61595a2def395b75ce1f2c3d353d7b68cb/src/css/components/_big-play.scss#L46-L52). We should probably fix this method, but I'll add an updated answer. — Matt McClure, Jan 06 '16 at 05:51

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

2 Answers2

Linked