video.js display poster image at end of video - html5-video

Question

USING VIDEO.JS in Adobe Muse
Currently I have poster image configured to display at beginning of video,
when video has concluded I'd like the poster image to re-appear. Thanks for any help!

Answer 1

In the future the best way to do this will be through css. I just added an issue for it.
.video-js.vjs-ended .vjs-poster {
display: block;
}
For now there's two ways using javascript that should work.
var myPlayer = videojs(myId);
myPlayer.on('ended', function(){
this.posterImage.show();
});
// or
myPlayer.on('ended', function(){
this.trigger('loadstart');
});
You'll want to test both for your specific use case.

Answer 2

This worked for me! Video JS 6.6
var video_player;
$(document).ready(function()
{
// 'videoplayer' is the ID of our <video> tag
videojs("my-video", {}, function()
{
video_player = this;
video_player.on('ended', function()
{
video_player.posterImage.show();
$(this.posterImage.contentEl()).show();
$(this.bigPlayButton.contentEl()).show();
video_player.currentTime(0);
video_player.controlBar.hide();
video_player.bigPlayButton.show();
video_player.cancelFullScreen();
});
video_player.on('play', function()
{
video_player.posterImage.hide();
video_player.controlBar.show();
video_player.bigPlayButton.hide();
});
});
});

Answer 3

You should use the following as specified here
var player = videojs('#example_video_1', {}, function() {
this.on('ended', function() {
player.exitFullscreen();
player.hasStarted(false);
});
});

Answer 4

For video.js version 7.8.1 in 2020, following #chukwuma-nwaugha answer, I ended up with this:
var options = {};
var player = videojs('example_video_1', options, function onPlayerReady() {
this.on('ended', function() {
if (player.isFullscreen()) {
player.exitFullscreen();
}
player.hasStarted(false);
});
});

Answer 5

This worked for me:
/* Show poster when paused or stopped */
.video-js.vjs-default-skin.vjs-paused .vjs-poster {
display:none !important;
}
.video-js.vjs-default-skin.vjs-ended .vjs-poster {display:block !important;}

Answer 6

I am using VideoJS 5.12.6. None of the solutions above worked for me. I ended up using:
myPlayer.on('ended', function(){
$('body .vjs-poster').fadeIn();
});

Answer 7

I upvoted #heff's reply following the downvote as CSS is working in July 2018.
After the class:
.vjs-has-started .vjs-poster {
display: none;
}
Add the class:
vjs-ended .vjs-poster {
display: inline-block;
}
That will restore the poster to its default visible state. The vjs-ended class must come after the vjs-has-started class unless you want to increase the class specificity.
This is working for me on two separate projects. I love the way Video.js allows me to do so much in CSS without having to struggle with JavaScript.

Answer 8

You can use css to display poster image :
.video-js.vjs-ended .vjs-poster {
display: block;
}
Please note : you must remove poster attribute from html video tag :
<video id="my-video" style="position: unset"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}">
To be like that :
<video id="my-video" style="position: unset"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
data-setup="{}">