jQuery를 숨겨 때, HTML5 비디오를 정지 공개 대상

Question

내가 부하에 자동 재생을 위해 설정되어있는 페이지에 내장 된 HTML5 비디오를 가지고 때 다시 시작합니다. 메뉴가 전환되면 숨겨지며 일련의 이미지가 대신 표시됩니다. 메뉴를 닫으면 비디오가 반환됩니다. 비디오가 숨겨진 상태에서 비디오를 멈추고 자원을 절약하기 위해 다시 시작한 후 다시 시작하는 것이 좋습니다.이 작업은 제가하고 싶지만 멈추고 다시 시작하는 대신에 다시 시작할 것을 권장합니다.

제안 사항? 나는 그것이 회색 지역이라는 것을 알고있다.

감사합니다.

HTML :

<div id="content"> 
    <video id="vid_home" width="780" height="520" autoplay="autoplay" loop="loop"> 
     <source src="Video/fernando.m4v" type="video/mp4" /> 
     <source src="Video/fernando.ogg" type="video/ogg" /> 
     Your browser does not support this video's playback. 
    </video> 
    <img id="img_home" src="Images/home.jpg" alt="Fernando Garibay /> 
</div> 

자바 스크립트 :

당신은 아마이 같은 모양 DOM 요소에 pause 및 play, 호출 할 필요가

// Navigation hover image preview 
$('#img_home').css('display', 'none'); 
$('.nav').hover(function(){ 
    $('#vid_home').fadeOut(600, function(){ 
     $('#img_home').fadeIn(800); 
    }); 
}); 
$('#item1').hover(function(){ 
    $('#img_home').attr('src', 'Images/music.jpg'); 
}); 
$('#item2').hover(function(){ 
    $('#img_home').attr('src', 'Images/photos.jpg'); 
}); 
$('#item3').hover(function(){ 
    $('#img_home').attr('src', 'Images/biography.jpg'); 
}); 
$('#item4').hover(function(){ 
    $('#img_home').attr('src', 'Images/discography.jpg'); 
}); 
$('#item5').hover(function(){ 
    $('#img_home').attr('src', 'Images/contact.jpg'); 
}); 
$('#item6').hover(function(){ 
    $('#img_home').attr('src', 'Images/blog.png'); 
}); 
// Navigation hover image leave 
    $('#trigger').mouseleave(function(){ 
     $('#img_home').fadeOut(400, function(){ 
      $('#vid_home').fadeIn(400); 
     }); 
    }); 

Answer 1

:

$('.nav').hover(function(){ 
    $('#vid_home').fadeOut(600, function(){ 
     $('#img_home').fadeIn(800); 
    }).get(0).pause(); // pause before the fade happens 
}); 

및

마법처럼

$('#trigger').mouseleave(function(){ 
    $('#img_home').fadeOut(400, function(){ 
     $('#vid_home').fadeIn(400, function() { 
      this.play(); // play after the fade is complete 
     }); 
    }); 
});