Video.js: Poster image should appear after the video is finished

[wjpdesigner]

Hi Video.js

I think the poster image should appear after the video is finished because right now I just see the last frame of the video (empty black screen).

Thanks,
Jack

[gkatsev]

Because videojs mimics and uses the native video element in browsers, we don't show the poster when the video finishes. You can see the native video element functionality here: http://www.w3.org/2010/05/video/mediaevents.html.

[mmcc]

You can listen for the ended event and show the poster yourself if you'd like, though. 

—
Sent from mobile

On Sun, Mar 8, 2015 at 8:08 PM, Jack Pardungsin [email protected]
wrote:

Hi Video.js
I think the poster image should appear after the video is finished because right now I just see the last frame of the video (empty black screen).
Thanks,

Jack

Reply to this email directly or view it on GitHub:
https://github.com/videojs/video.js/issues/1938

[heff]

You can also add the following to your CSS, as of v4.12.

.video-js.vjs-ended .vjs-poster {
  display: block;
}

[wjpdesigner]

Hi heff,

Thank you so much your method is working.

Thanks,
Jack

[wysocki]

Only my controls come up at the end. I'm running 4.12.5 and heff's css didn't work for me. I'd also like the big start button to reappear if possible.

[heff]

@wysocki that CSS didn't even bring up the poster? You could try:

.vjs-default-skin.vjs-ended .vjs-big-play-button {
  display: none;
}

You can see how the big play button is hidden with CSS here.

[wysocki]

That did it, heff! That got the play button at the end now (although I believe you meant display:block instead of none). I also have the poster back but not sure exactly why. I stripped my code down to minimum and rebuilt, but at least it works now, THANKS!

[heff]

Nice, great to hear!

[miriam-wr]

heff's css didn't work for me...
any idea?

[carloscarnero]

heff's css didn't work for me...
any idea?

I'm currently using something like this:

$videoPlayer.on("ended", function () {
  $videoPlayer.currentTime(0);
  $videoPlayer.hasStarted(false);
  $videoPlayer.trigger("ready");
});