비디오가 끝난 후 이미지로 리디렉션

Question

사이트에 들어가 자마자 비디오가있는 사이트에서 작업하고 있습니다. 문제는 그냥 끝나고 끝나면 이미지로 바꾸고 싶습니다. 동일한 컨테이너 내에서 리디렉션 할 수있는 방법이 있습니까?

<video id="video_background" preload="auto" volume="5" autoplay="1"><!--or turn on loop="loop"--> 
      <source src="videos/trailer.webm" type="video/webm"> 
      <source src="videos/trailer.mp4" type="video/mp4"> 
      <source src="videos/trailer.ogv" type="video/ogg ogv"> 

    </video> 

Answer 1

div 태그에 비디오 태그를 래핑해야합니다.

CSS :

#wrapper{ 
width:640px; 
height:360px; 
background:#000; 
} 
#image_background{ 
display:none; 
} 

HTML :

<div id="wrapper"> 
<video id="video_background" preload="auto" volume="5" autoplay="1" width="100%" height="100%"> 
    <source src="videos/trailer.webm" type="video/webm" /> 
    <source src="videos/trailer.mp4" type="video/mp4" /> 
    <source src="videos/trailer.ogv" type="video/ogg ogv" /> 
</video> 
<img id="image_background" src="yourImage.jpg" width="100%" height="100%" /> 
</div> 

JS : 다음 코드를 시도

var video = document.getElementById('video_background'); 
var wrapper = document.getElementById('wrapper'); 
var image = document.getElementById('image_background'); 
video.addEventListener('ended', function() { 
    video.style.display = 'none'; 
    image.style.display = 'inline'; 
}, false); 

편집 :방법 부드러운-KO 난을 전환 페이드 그것은 무엇인가?

이러한 기능을 사용하여 jQuery를 사용하므로이 기능을 사용합니다.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
var video = $('#video_background'); 
var image = $('#image_background'); 

video.on('ended', function() { 
    $(this).fadeOut('200',function(){//$(this) refers to video 
     image.fadeIn('200'); 
    }); 
}); 
</script> 

Answer 2

당신은 비디오 끝을 감지 자바 스크립트를 사용해야합니다하지만 쉽게 구현할 수 :

var video = document.getElementById('video_background'); 

video.addEventListener('ended', function() { 
    // show image here 
}, false); 

나는이있는 부모 컨테이너를 대상으로 추천 미리로드 된 이미지가 숨겨져 있고 이벤트가 시작될 때 전환됩니다 (분명히 동영상 요소도 숨김).

이미지를 동적으로 추가 할 수도 있지만 이미지를로드하는 동안 지연이 있음을 알고 있어야합니다.