jQuery arrêter la vidéo HTML5 caché, quand relancer visibile

J'ai une vidéo HTML5 incorporé dans une page qui est configuré pour la lecture automatique de la charge. Lorsqu'un menu est activée, il est caché et une série d'images pour prendre sa place. Lorsque le menu est mis fermée, la vidéo de rendement. Il a été recommandé que j'arrête la vidéo pendant qu'il est caché et de la reprendre une fois, c'est le retour à la préservation des ressources, que j'aimerais faire, mais d'arrêter et de redémarrer (au lieu de reprendre).

Des suggestions? Je sais que c'est une zone grise.

Merci!

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);
        });
    });

OriginalL'auteur technopeasant | 2011-01-14