Html5 Video/End of a Video Poster

HTML5 Video / End of a Video Poster

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

How to show html5 video poster end of video play?

Finally I achieved my goal with following code

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

Can HTML video poster be shown at close of video without using jquery or javascript

Edit

1. When you have more than one video, getElementById() will not work for all of them, it's designed to access only one element because an id is unique. You cannot have 2 videos with the id of myVideo, you cannot have 2 divs with the id of video-player, nor can you have 2 divs with the id of video-tree. Change the div ids into class and the myVideo into myVideo1 and myVideo2.

2. You must either add an event to each video which is wasteful and redundant, or you can collect the videos into a list (an array, NodeList, etc).

Snippet 2 will:

1. Collect all 4 video elements into a NodeList and convert it into an array.
2. Using the array method forEach() it will take each video in the array and add an eventListener to it (a little wasteful but if I make more efficient it'll be more complicated).

See Snippet 2

Old

I don't recall any way to invoke the poster attribute without JavaScript. But it looks as if you already use JavaScript anyhow so you need to use the .load() method.

Snippet 1

var vid = document.getElementById('vid');
vid.addEventListener('ended', function(e) {  this.load();}, false);

<video id='vid' poster="http://placehold.it/430x250/0e0/111?text=POSTER" width="430" height="250" controls><source src="http://media6000.dropshots.com/photos/1381926/20170326/005612.mp4" type="video/mp4"></video>

<video id="video0" width="100%" oncontextmenu="return false;" controls poster="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png"><source src="https://html5demos.com/assets/dizzy.mp4" type="video/mp4"></video>
<script>  var vid = document.getElementById('video0');
  vid.addEventListener('ended', stop);
  function stop(event) {    this.load();  }</script>