0

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>

2 Answers2

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>
Pang
  • 9,564
  • 146
  • 81
  • 122
0

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>
TimHayes
  • 3,684
  • 21
  • 26