jQuery stop HTML5-video wenn Sie versteckt sind, neu zu starten, wenn sichtbar

Ich habe ein HTML5 video in eine Webseite eingebettet, das für die automatische Wiedergabe auf laden. Wenn ein Menü aktiviert ist, ist es ausgeblendet, und eine Reihe von Bildern, die seinen Platz einnehmen. Wenn das Menü gelegt wird geschlossen, das video gibt. Es wurde empfohlen, dass ich das video anhalten, während es versteckt und wieder einmal geht es wieder um Ressourcen zu sparen, die ich gerne tun würde, aber stoppen und neu starten (anstelle von resume).

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

Dank!

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

InformationsquelleAutor technopeasant | 2011-01-14

Schreibe einen Kommentar