HTML5 Video / End of a Video Poster

Question

With the above; within the HTML

Answer 1

This is what I ended up doing to see a poster after the video finished playing:

# Show poster at the end of the video
$('video').on('ended',->
  $('video')[0].autoplay=false
  $('video')[0].load()
)

Answer 2

In short: what you need is to add video.addEventListener('ended',function() {}) and trigger video.load() in your custom JavaScript.

Here is a related post that redirects after video is played, you may modify it accordingly - Redirect html5 video after play.

References to look for detailed information:

• Everything you need to know about HTML5 video and audio
• Media events to which you can bind
• HTML5 Video Events and API
• MSDN - Using HTML5 video events

Answer 3

I see two ways to solve your issue.

First one will set your current frame to position 0 (the very first frame) after the video will end. You can set any frame you like. This solution is recommended.

<video controls id="myVideo" poster="test.jpg">
  <source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
  myVideo.currentTime = 0;
};
</script>

The next one will reload the video source, so the poster will appear again. According to specification of poster in video it will be displayed only until the video starts once. After that, the only way to get the poster again - reload the video src, and a poster, just to make sure. Will work a little bit more stable with poster reloading.

<video controls id="myVideo" poster="test.jpg">
  <source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
  myVideo.poster = "test.jpg"
  myVideo.src = "test.mp4"
};
</script> 

Answer 4

solved by adding 1 extra frame (poster) at the end of the video itself, because website didnt support inserting of javascripts

Answer 5

Finally I got the solution: video will autoplay first-time and at end of video you will see the poster image:

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript">
 document.observe('dom:loaded', function(evt){
    $('#myVideo').each(function(elm){
        elm.play();
        var wrapper = elm.wrap('span');
        var vid = elm.clone(true);
        elm.observe('ended', function(){
          wrapper.update(vid);
       });
    });
 });
</script>

<video id="myVideo" poster="1.png" >
    <source src="1.mp4" type="video/mp4" />
</video>

Answer 6

try this

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v;            
});