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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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