오버레이 페이드 아웃이 포함 된 SEO 용 HTML5 동영상 (video.js) 소개

Question

video.js 플러그인을 사용하며 사이트가로드 될 때 재생되는 동영상 소개가 있습니다. 그것은 페이지가로드되고 z- 색인화되고 내 홈 페이지 위에 오버레이 된 div 컨테이너에있는 즉시 자동 재생으로 작동합니다.

jquery를 delay()으로 설정 한 다음 fadeOut() div로 내 홈 페이지를 나타냅니다.

이론 상으로는 모두가 서로 다른 연결 속도를 가지고 있으며 fadeOut()은 너무 일찍 또는 너무 늦게 발생합니다.

동영상이 중단되었을 때 fadeOut() 내 div로가는 방법이 있습니까?

$(document).ready(function() { 
     $("#overlay-video").delay(10000).fadeOut('slow'); 
    }); 

편집 : 내 HTML은 다음과 같습니다 답장에 대한

$(document).ready(function(){ 
    $("#movie-id").bind('ended', function(){ 
    alert("planet earth"); 
    }); 
}); 

감사 : 나는 또한 바로 다음 있지만이 또한 작동하지 않습니다를 시도

다음

내 jQuery를하다

<div id="overlay-video"> 
    <!-- Begin Video.js --> 
    <video id="movie-id" class="video-js vjs-default-skin alignleft" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" autoplay data-setup="{}"> 
     <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> 
     <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' /> 
     <source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' /> 
    </video> 
    <!-- End Video.js --> 
</div> 

비디오 요소를 잘 페이드 처리 할 수 ​​있기 때문에 jQuery가 작동합니다.

Answer 1

커플 일 : 단 하나의 doc.ready fxn는

가장 중요한

가 on() 방법을 사용하여 홈 페이지의 모든 스크립트 (jQuery를 함께 1.7+), fadeOut()에 필요한

1. on('ended') 함수 안에 있어야합니다.

http://jsfiddle.net/trpeters1/XzCMb/1/이

$(document).ready(function(){ 
    $("#movie-id").on('ended', function() {    
     console.log('im done'); 
     $("#overlay-video").delay(10000).fadeOut('slow'); 
    }); 
}); 

그러나, 비디오 JS가에는 Video.js 객체에 대한 호출을 필요로 나타나므로 대신 이렇게 : 일반 HTML5 <video> 솔루션으로서,이 작업을해야 http://help.videojs.com/discussions/questions/509-videojs-and-passing-an-event-at-the-end-of-the-video

_V_("#movie-id").ready(function(){ //note the different selector for the ready() fxn 
    this.addEvent("ended", function(){ //adding "ended" event to video-js object 
    { console.log('im done'); 
     $("#overlay-video").delay(10000).fadeOut('slow'); 
     } 
    }); 
});