我已经设置了一个视频,点击一个按钮就可以显示在灯箱 div 中。
<object width="640" height="360" id="player">
<param name="movie" value="http://youtu.be/Gwv5Pn--7ok?version=3&hl=en_US&rel=0&start=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://youtu.be/Gwv5Pn--7ok?version=3&hl=en_US&rel=0&start=0" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
这些是按下按钮的回调
var hideYoutube = function() {
$('#fadeoutwindow').css('display', 'none');
$('#lightbox').css('display', 'none');
$('#horizonyt').css('z-index', '-1');
$('#horizonyt').css('visibility', 'hidden');
};
var showYoutube = function() {
$('#fadeoutwindow').css('display', 'block');
$('#lightbox').css('display', 'block');
$('#horizonyt').css('z-index', '1000');
$('#horizonyt').css('visibility', 'visible');
$('#fadeoutwindow').click(function() {hideYoutube(); });
};
$('#youtube').click(function() {
showYoutube(); return false;
});
这似乎在除 IE 之外的所有浏览器上都可以正常工作。在 IE 上,当 div 被隐藏时,视频会在后台继续播放。有没有办法在隐藏时停止它并在第二次单击按钮时重新启动它?
(注意:其他元素——horizonyt 和fadeoutwindow——仅用于对齐和淡出其他所有内容。)
谢谢。