jQuery छुपाए जाने पर एचटीएमएल 5 वीडियो बंद करें, विज़िबल

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> 

जावास्क्रिप्ट:

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

आप डोम तत्वों पर pause और play, जो शायद कुछ इस तरह दिखेगा कॉल करने की आवश्यकता:

$('.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 
     }); 
    }); 
});