Revert to poster image after video is ended [duplicate]

Question

Is it possible to re-show the poster image after the video is ended? or maybe if the video could reload itself that would show the initial poster image right?

I'm using this code right now:

  <video width="80%"controls poster="images/logo_vid.jpg">
  <source src="video/gl.mp4" type="video/mp4">
  Your browser does not support the video tag.
  </video>

If someone have any idea how this could work I'll really appreciate..

Answer 1

The video-element fires a media handler ended after the playback stopped, so you can use the corresponding event-handler onended and do whatever you want :)

EDIT: I modified my example, it now returns to the poster image.
Adding and removing a source seems to be the only way to make it work on all browsers :/

EDIT 2: OK, video.load() does the trick, too :D

<video width="80%" controls poster="images/logo_vid.jpg" onended="videoEnded(this)">
  <source src="video/gl.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script type="text/javascript">    
  function videoEnded(video) {
    video.load();
  };
</script>