5
我已經將HTML5視頻嵌入到爲加載自動播放設置的頁面中。當一個菜單被切換時,它被隱藏起來,一系列圖像取代它。當菜單關閉時,視頻返回。建議我在隱藏視頻時停止視頻,並在恢復後重新開始保存資源,但我希望這樣做,但是請停止並重新啓動(而不是恢復)。jQuery在隱藏時停止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);
});
});
就像一個魅力。感謝您的時間和專業知識。 – technopeasant 2011-01-14 00:56:27