用 html5 结束视频的海报答案

【问题标题】：Poster to end video with html5用 html5 结束视频的海报
【发布时间】：2019-03-28 06:25:44
【问题描述】：

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

现在，当我播放视频以结束视频时，不显示海报以结束视频。我使用最新的浏览器版本。我在哪里弄错了？我该如何解决？谢谢。

【问题讨论】：

标签： jquery html video

【解决方案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>

【讨论】：

很高兴我能帮上忙。