jquery 可以淡入淡出吗在视频中

Question

我在 vid.html 中有一个 flv 文件，它工作正常， 但有什么方法可以让视频本身淡入/淡出吗？

<div id="fadeit">
    <div class="video"></div>
</div>

这是行不通的；

$('.video').hide().fadeIn().load('vid.html');

将其包装在 div 中并淡入 div 也不起作用；

$('#fadeit').hide().fadeIn(1400);

Answer 1

无 wmode 或 wmode 透明：FF、Chrome 和 Safari

wmode 不透明、FF、Chrome、Safari 和 IE8（仅 ie8 进行测试）

淡入淡出 flash 和 div 叠加。

http://jsfiddle.net/WWvmz/2/

Answer 2

您无法对 Flash 内容进行样式设置。您甚至不能将菜单等放置在 Flash 对象上方。

（flash必死的原因之一）

Answer 3

模拟这种情况的一种方法是在嵌入视频的 iframe 上覆盖一个全白色的绝对定位的 div，然后淡出该 div。

将 div 的标准 CSS 设置为“display: none;”防止如果人们禁用了 javascript 并让 jquery 显示视频，则视频不会显示。

示例 CSS

#video_container {
    position: relative;

    width: 725px;
    height: 430px;
}

#video_overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 725px;
    height: 430px;

    background-color: #FFFFFF;
}

示例 html

<div id="video_container">
    <div id="video_overlay"></div>
    <iframe width="725" height="430" src="http://www.youtube.com/embed/TxvpctgU_s8?rel=0&showinfo=0&autoplay=1&loop=1"></iframe>
</div>

jquery

$("#video_overlay").show(); 
setTimeout(function() { 
    $("#video_overlay").fadeOut(1500); 
}, 2500);

我使用 setTimeout 函数在视频加载后进行叠加淡出（以防止黑色加载屏幕）。如果您不被加载屏幕打扰，也可以忽略此选项

$("#video_overlay").show(); 
$("#video_overlay").fadeOut(1500);

要再次淡出

$("#video_overlay").fadeIn(1500);

jsfiddle： http:// /jsfiddle.net/RPjXv/2/