jQuery dừng video HTML5 khi bị ẩn, khởi động lại khi hiển thị

Question

Tôi đã nhúng video HTML5 vào trang được đặt để tự động phát khi tải. Khi một menu được bật, nó được ẩn và một loạt các hình ảnh diễn ra. Khi menu được đóng, video sẽ trả về. Đó là khuyến cáo rằng tôi dừng video trong khi nó ẩn và tiếp tục nó một khi nó trở lại để bảo tồn tài nguyên, mà tôi muốn làm, nhưng dừng lại và khởi động lại (thay vì tiếp tục).

Mọi đề xuất? Tôi biết đó là một khu vực màu xám.

Cảm ơn!

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> 

Javascript:

// 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

Bạn cần phải gọi pause và play trên các yếu tố DOM, mà có lẽ sẽ giống như thế này:

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

và

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