使用html5结束视频的海报

Question

我需要添加一张海报，用html5视频播放器结束视频。当然，我在这里搜索并查看它：

HTML5 Video / End of a Video Poster

所以，我有这个代码：

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