Question

我有2个视频。每7秒长。我需要顶级视频在完成播放一半之后淡出，将底部视频显示3.5秒，然后以无限循环淡入。我无法让视频消失，也不确定如何在特定时间启动视频。这就是我所拥有的：

JS

<script type="text/javascript">
 video.addEventListener('ended', function () {
       $('#vid').addClass('hide');
       $('video').delay(100).fadeOut();       
 }, false);
video.play();
var vid1=document.getElementById("video-loop");
vid1.addEventListener(function () {
            $('video').delay(100);
        }, false);
vid1.play();
</script>

HTML

<div id="#video">
<video id="vid" autoplay preload="auto">
  <source src="videos/interactive2_3.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
</video>
<video id="video-loop" preload="auto" loop>     
    <source src="videos/interactive2-loop.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
 </video>
 </div>

Answer 1

要跟踪视频中的时间并根据该时间做出决定，您需要跟踪视频上的timeupdate事件，然后使用currentTime属性来决定要执行的操作。

这个片段允许你在2.5s标记处交换一个视频，播放第二个3.5s然后交换回第一个...你可以根据计时器事件进行详细说明，使其更适合你的场景...

<script>
var showing = 1 // which of the two videos are showing at the moment

var video1 = document.getElementById('vid');
var video2 = document.getElementById('video-loop');

video1.addEventListener('timeupdate',function(e){
    if ((showing == 1) && (video1.currentTime > 2.5)) {
       showing=2
       video1.pause()
       $('#vid').delay(100).fadeOut(); 
       $('#video-loop').delay(100).fadeIn(); 
       video2.play()
    }
}); 
video2.addEventListener('timeupdate',function(e){
    if ((showing == 2) && (video2.currentTime > 3.5)) {
       video2.pause()
       $('#video-loop').delay(100).fadeOut(); 
       $('#vid').delay(100).fadeIn(); 
       video1.play()
    }
}); 
</script>

HTML5视频淡出当其中途完成/视频下方开始播放时

1 个答案: