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>

使用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

你需要在DOM元素上调用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
        });
    });
});

jQuery在隐藏时停止HTML5视频，在可见时重启

1 个答案: