Video.js : show big play button at the end

Question

I would like to show the big play button at the end of the video, so user can replay it easily.

It seems that this big play button is shown by default (every posts I read are for hidding it instead of showing it...), but it is not the case for me...

I have tried to edit the following function (in video.dev.js file) but nothing has changed :

vjs.Player.prototype.onEnded = function(){
  if (this.options_['loop']) {
      this.currentTime(0);
      this.play();
  }
  else {  // I am not using loop mode
      this.bigPlayButton.show();
      this.pause();
  }
};

Thanks for your responses.

score 10 · Accepted Answer · answered Jul 08 '13 at 22:34

10

There are a few ways you can do this. You can show the button when the video ends with the API:

videojs("myPlayer").ready(function(){
  var myPlayer = this;
  myPlayer.on("ended", function(){
    myPlayer.bigPlayButton.show();
  });
});

Or if you do want to modify video.dev.js you just need to uncomment the line that does the same thing:

vjs.BigPlayButton = vjs.Button.extend({
  /** @constructor */
  init: function(player, options){
    vjs.Button.call(this, player, options);

    if (!player.controls()) {
      this.hide();
    }

    player.on('play', vjs.bind(this, this.hide));
    // player.on('ended', vjs.bind(this, this.show)); // uncomment this
  }
});

Or with CSS you could force the button to be showed whenever the video is not playing (ended or paused):

.video-js.vjs-default-skin.vjs-paused .vjs-big-play-button {display:block !important;}

The posts you've seen about hiding it probably refer to version 3 of video.js, as with that the play button was shown at the end.

answered Jul 08 '13 at 22:34

misterben

7,455
2
26
47

In fact, the second method does not work. I have edited the video.dev.js file but this change nothing... Is there something that I have missed ? – EMG Jul 09 '13 at 16:31
I just took the [download](http://www.videojs.com/downloads/video-js-4.1.0.zip) from videojs.com, uncommented that line in `video.dev.js` and changed the script used in `demo.html` from `video.js` to `video.dev.js`. Works for me. – misterben Jul 09 '13 at 16:45
Indeed, it works for the demo.html file. But in the file I use it does not work. I don't understand the difference between video.js and video.dev.js ? Thanks for your help ;) – EMG Jul 10 '13 at 09:30
`video.dev.js` is an unminified (readable) version of `video.js`. – misterben Jul 10 '13 at 17:15

Christoph · Answer 2 · 2014-04-10T15:59:31.260

Place this code after the videojs code. Works great. It not only shows the poster and the big play button, but also allows you to re-play the video again and again:

<script type="text/javascript">
    var vid = videojs("YOUR-VIDEO-ID"); 
    vid.on("ended", function()
        { 
            vid.posterImage.show(); //shows your poster image//
            vid.currentTime(0);
            vid.controlBar.hide(); //hides your controls//
            vid.bigPlayButton.show(); //shows your play button//
            vid.cancelFullScreen(); //cancels your fullscreen//
            document.mozCancelFullScreen(); //cancels your fullscreen in firefox//
        });  
    vid.on("play", function()  //function to play the video again//
        {  
            vid.posterImage.hide(); //hides your poster//
            vid.controlBar.show(); //shows your controls//
            vid.bigPlayButton.hide(); //hides your play button//
        });
</script>

The only thing I can't get to work is the exit fullscreen with firefox... But I don't know what else to do.

score 2 · Answer 3 · answered Jun 07 '17 at 16:28

I don't know why but I cant get the answers mentioned here to work, maybe it's because I am on a newer version of the player, so doing things like vid.posterImage.show() is not doing anything for me.

On version 5.19.2 (current release), I was able to reset the player to it's default state (before the play button is pressed by the first time) by setting hasStarted to false on the event listener "ended".

example:

var player = videojs('player');

player.on("ended",function(){

    player.hasStarted(false);
});

That brings back the big button, the poster, and hides the controls.

This with `player.currentTime(0)` gave me the setup I was looking for. `player.on('ended', () => { player.currentTime(0); player.hasStarted(false); })` — coderfin, May 19 '22 at 21:38

score 1 · Answer 4 · answered May 13 '14 at 21:23

1

I created this plugin to "reset" the player and show the big play button and the video's poster

https://github.com/brianpkelley/video-js-4-plugins/blob/master/showPosterAtEnd/videojs.showPosterAtEnd.js

answered May 13 '14 at 21:23

tastybytes

1,309
7
17

Video.js : show big play button at the end

4 Answers4