Need poster at the end of video but not the beginning

Question

What I have currently will display my poster once the video ends. However, it also shows at the beginning of the video (which is set to autoplay). I don't want it at the beginning of the video, just the end. Here's what I have.

<div id="wrapper">
<video id="example_vid" class="video-js vjs-default-skin" 
    controls preload="auto" poster="images/poster_test.png" 
width="780" height="439"
autoplay
data-setup='{"example_option": true}'>
<source src="videos/subaru.mp4" type='video/mp4' />  
<source src="videos/subaru.webm" type='video/webm' />
<source src="videos/subaru.ogv" type='video/ogg' />

</video>
</div>

…

<script> 
 var vid = videojs("example_vid"); 
 vid.on("ended", function(){ 
 vid.posterImage.show(); 
 vid.currentTime(0); 
 }) 
</script>

score 1 · Answer 1 · edited May 09 '17 at 03:00

1

Try this. It worked for me.

<script>
var vid = document.getElementById("myVideo"); 
vid.addEventListener('ended', function(){
    vid.poster = "images/poster_test.png";
    vid.src = "";
    vid.controls = false;
}); 
</script>

edited May 09 '17 at 03:00

Pang

9,564
146
81
122

answered May 08 '17 at 19:56

user7982689

11
1

score 0 · Answer 2 · answered Mar 03 '14 at 03:29

I didn't test this, but I'd try 1) taking the poster attribute out of the video element, then 2) setting it through script on ended. Like this

<script> 
 var vid = videojs("example_vid"); 
 vid.on("ended", function(){
   vid.poster("images/poster_test.png");
   vid.currentTime(0); 
 }) 
</script>

Need poster at the end of video but not the beginning

2 Answers2