Question

假设我有一个包含2个div的页面。在第一个div我有一个视频。在视频播放30秒剪辑后，我希望第二个div显示“关于视频”文本。我怎么能做到这一点？

代码：

 <div class="clip"> (This is the first div)
 <video width="560" height="340" controls>
 <source src="media/clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src="media/clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
 </video>
 </div>

 <div class="about_video"> (This is the second div)
 Clip by Person.  The clip is about sample..
 </div>

Answer 1

这样的事情应该有效：

HTML （ID是您的朋友）：

 <div id="div1" class="clip"> (This is the first div)
     <video id="myVideo" width="560" height="340" controls>
         <source src="media/clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
         <source src="media/clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
     </video>
 </div>

 <div id="div2" class="about_video"> (This is the second div)
     Clip by Person.  The clip is about sample..
 </div>

CSS ：

.about_video {
    display: 'none';
}

JS ：

document.getElementById('myVideo').addEventListener('ended', function(e) {
    document.getElementById('div2').style.display = 'block';
});

Answer 2

我在这里有一个类似的演示：http://jsfiddle.net/frictionless/NNCRR/

在延迟5000毫秒或5秒后出现顶部栏

$(function() {

   $('.headerbar')       
    .delay(5000).slideDown();

});

希望这有帮助

有关详情http://api.jquery.com/delay/

我可以使用javascript延迟加载某些div吗？

2 个答案: