jQuery stoppe HTML5-Video, wenn ausgeblendet, neu starten, wenn sichtbar

Question

Ich habe ein HTML5-Video in eine Seite eingebettet, die für Autoplay beim Laden eingestellt ist. Wenn ein Menü umgeschaltet wird, wird es ausgeblendet und eine Reihe von Bildern nimmt seinen Platz ein. Wenn das Menü geschlossen wird, kehrt das Video zurück. Es wurde empfohlen, das Video anzuhalten, während es ausgeblendet ist, und es fortzusetzen, sobald es zurück ist, um Ressourcen zu sparen, was ich gerne tun würde, aber anhalten und neu starten (anstatt fortfahren).

Irgendwelche Vorschläge? Ich weiß, es ist eine Grauzone.

Danke!

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

Sie benötigen pause und play auf die DOM-Elemente zu nennen, die wahrscheinlich so etwas wie folgt aussehen:

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

und

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