Question

我有两个div。视频div包含Flash视频。照片div包含图像。

<div id="container">
<div id="video">flash embed file</div>
<div id="photo" style="display:none;">image</div>
<div>

我想以x秒为单位显示视频div，然后隐藏视频，然后淡入到照片div。

如果代码可以重复使用会很好，因为我在一个页面上有4组视频/图像div

TIA

感谢大家的快速回复

最后我选择了'mu is too short'的解决方案。它使用Jquery，过于简单，适用于所有5个主要浏览器

<script type="text/javascript">
$(document).ready(function(){
n = 20; // Or however many seconds you want to delay.
setTimeout(function() {
    $('#video').fadeOut();
    $('#photo>').fadeIn();
}, n * 1000);
});
</script>

<div id="container">
<div id="video">flash embed file</div>
<div id="photo" style="display:none;"><a href="#">image</a></div>
<div>

Answer 1

你可以用setTimeout掀起一些东西：

// Once the video is playing...
n = 2; // Or however many seconds you want to delay.
setTimeout(function() {
    $('#video').fadeOut();
    $('#photo').fadeIn();
}, n * 1000);

你应该可以很容易地将它包装在实用程序函数或插件中。

你可能想要这个：

#container {
    position: relative;
}
#video, #photo {
    position: absolute;
    top: 0;
    left: 0;
}

将它们叠加在一起。例如（仅使用图像）：http://jsfiddle.net/ambiguous/tquxa/

Answer 2

例如，您可以尝试这样的事情：

function fadeInOut(delay, id1, id2)
{
    $('#' + id1).delay(delay).fadeOut(400);
    $('#' + id2).delay(delay).fadeIn(400);
}

希望这会有所帮助：）

Answer 3

使用class！

DEMO jsFiddle

$('.video').delay(3000).fadeTo(400,0);
$('.photo').delay(3000).fadeTo(400,1);

和CSS：

.video, .photo{
   position:absolute;
}

Answer 4

有闪存播放器有javascript API，例如我使用FlowPlayer（http://flowplayer.org/documentation/api/index.html）。此特定播放器允许您即时创建播放器，然后使用JavaScript API捕获事件并控制视频。

当您使用flowplayer的javascript方法创建Flash视频播放器时，您可以设置一个“onFinish”事件处理程序，它将隐藏电影并显示照片。

在电影播放结束时使用事件处理程序的好处是整个电影将在每个连接速度上为每个人播放。如果设置超时，用户可能必须缓冲并错过视频的结尾（或者对于速度非常慢的人，他们可能会一起错过电影）。

以下是flowplayer网站的一些示例代码：

$f("player1", "flowplayer.swf", {
    clip: {
        url: 'KimAronson-TwentySeconds59483.flv',
        autoPlay: true,
        autoBuffering: true
    },
    plugins: {
        controls: null
    },
    onLoad: function(){
        alert("player loaded");
    }
    onFinish: function() {
        $('#video').hide(); 
        $('#photo').show();
    }
});

注意：您还需要检查Flash视频的wmode参数。设置为默认wmode（或“窗口”）的Flash视频将显示在其他内容上，即使其z-index设置为较低或隐藏也是如此。将其设置为不透明或透明，以便html对象可以显示在flash对象的上方（和下方）。不透明模式允许对象覆盖flash对象，透明模式允许对象在flash对象上方和下方（使flash对象透明）。

另一个注意：Flowplayer（我相信还有其他一些）非常酷，因为您可以使用大量的活动以及可以用于视频的大量控件。

Answer 5

您想要/需要链接效果。您可以使用the callback function feature执行此操作：

function delayHideThenFadeIn (delay, startNode, endNode)
{
    $('#' + startNode).delay (delay).hide (function () {
        $('#' + endNode).fadeIn ('slow');
    } );

}

delayHideThenFadeIn (1000, 'video', 'photo');

See it in action at jsFiddle.

在x秒内显示隐藏2个DIV与Jquery

5 个答案:

DEMO jsFiddle