Question

我需要添加一个海报以使用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>

海报以html5结束视频

1 个答案: