HTML 视频后海报展示

Question

我希望在我的视频完成后重新显示我的海报。于是我根据Tutorial尝试了几种方法。我的demo 在这里。由于某些原因，播放按钮和静音按钮在 jsfiddle 上不起作用，但它们在我的电脑上工作。所以我只需要弄清楚如何再次显示我的海报图像？谢谢！

下面附上相关代码：

<video  id='ad' width="640" height="360" poster="img/model.jpg">

       <source src="video/model.mp4" type="video/mp4">
       <source src="video/model.webm" type="video/webm">

   </video>

<script type="text/javascript">

       setTimeout(function(){
           document.getElementById("ad").play();
       },3000);

       var video = "img/model.jpg";
       var ad = document.getElementById("ad");
       ad.onended = function () {
           ad.src = video;
       }


   </script>

感谢您的帮助！

Answer 1

var video = document.getElementById('ad');
video.addEventListener('ended',function(){
     //this will run after video end
});