размещение различных плакатов в начале и в конце видео html5

Я могу реализовать плакат в начале видео с помощьюposter="beginning.jpg", но как поместить другое изображение в конце видео? пример изображения похож ending.jpg

<video controls width="100%" poster="beginning.jpg" >
  <source src="video.mp4" />
</video>

вот jsfiddle

2 ответа

  1. Использованиеended, playсобытия, .load()

    <video width="100%" controls poster="/image/src/">
      <source src="/video/src/" type="video/mp4" />
    </video>
    <script>
      var video = document.querySelector("video");
      video.onplay = function() {
        this.setAttribute("poster", "") // remove `poster` image
      video.onended = function(e) { 
         this.setAttribute("poster", "/new/image/src") // set new `poster` image
         // call `.load()`
         this.load();
      }
    </script>
    

    jsfiddle https://jsfiddle.net/ey4tfp30/4/

  2. Сначала добавьте идентификатор к видео.

    var video = document.getElementById('video');
    var posterURL = 'end.jpg';
    
    // Preload the end poster when the video starts to play
    video.addEventListener('play', function() {
      var image = new Image();
      image.src = posterURL;
    });
    
    // Set and display the end poster
    video.addEventListener('ended', function() {
      video.poster = posterURL;
      video.load();
    });