Video.js: show the big play button at the end

Question

I want to show the big play button at the end of the video so that the user can easily play it.

It seems that this play button is displayed by default (all the messages I read are intended to avoid them, and not to show ...), but this does not apply to me ...

I tried to edit the following function (in the video.dev.js file), but nothing 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(); } }; 

Thank you for your responses.

Answer 1

There are several ways to 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 want to change video.dev.js , you just need to uncomment the line that does the same:

 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 can make the button appear whenever the video does not play (completed or paused):

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

The messages you saw about hiding probably refer to version 3 of the .js video, as in this case the play button was shown at the end.

Answer 2

Put this code after the videojs code. It works great. Not only does it display a poster and a large play button, but it also allows you to replay the video over and over:

 <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 work with is to exit full-screen mode using firefox ... But I don’t know what else to do.

Answer 3

I created this plugin for the "reset" player and will show a large play button and video poster

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

Answer 4

I don’t know why, but I can’t get the answers mentioned here to work, maybe because I’m on a new version of the player, so things like vid.posterImage.show () do nothing for me.

In version 5.19.2 (current version), I was able to reset the player to set it to default (before pressing the play button for the first time), setting hasStarted to false on the event listener "ended".

Example:

 var player = videojs('player'); player.on("ended",function(){ player.hasStarted(false); }); 

This returns a large button, poster, and hides controls.