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 
});