Плакат для окончания видео с html5

Question

Мне нужно добавить постер, чтобы закончить видео с помощью html5-видеоплеера.Конечно, я искал здесь и посмотрел его:

HTML5 Видео / Конец видео-постера

Итак, у меня есть этот код:

<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" width="100%" height="100%" oncontextmenu="return false;" controls poster="thumbnail.png">
<source src="video.mp4" type="video/mp4">
</video>         

Теперь, когда я иду проигрывать мое видео до конца видео, не показывать плакат до конца видео.Я использую последнюю версию браузера.Где я ошибся?Как я могу решить это?Благодаря.

Answer 1

Зарегистрируйте видео на событие ended, а затем используйте метод .load() для перезагрузки видео.

<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>