0

2 つの div を持つページがあるとします。最初の div にはビデオがあります。ビデオが 30 秒のクリップを再生した後、2 番目の 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>
4

2 に答える 2

3

このようなものが動作するはずです:

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';
});
于 2012-12-04T00:33:46.547 に答える
1

ここに同様のデモがあります: http://jsfiddle.net/frictionless/NNCRR/

トップバーは 5000 ミリ秒または 5 秒の遅延後に表示されます

$(function() {

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

});​

お役に立てれば

詳細については、http://api.jquery.com/delay/を確認してください。

于 2012-12-04T00:33:08.917 に答える