HTML5视频淡出当它完成一半时/下面的视频开始播放答案

【问题标题】：HTML5 video fade out When its halfway done/ video underneath starts playingHTML5视频淡出当它完成一半时/下面的视频开始播放
【发布时间】：2013-12-24 17:03:05
【问题描述】：

我有 2 个视频。每 7 秒长。我需要顶部视频在播放到一半后淡出，显示底部视频 3.5 秒，然后在无限循环中淡入。我无法让视频褪色，也不知道如何让它在特定时间开始。这就是我所拥有的：

<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>

【问题讨论】：

标签： html loops video fade

【解决方案1】：

要跟踪视频中的时间并据此做出决定，您需要跟踪视频中的timeupdate 事件，然后使用currentTime 属性来决定要做什么。

此片段将允许您在 2.5 秒标记处换出一个视频，播放第二个视频 3.5 秒然后换回第一个...您可以根据计时器事件进行详细说明，以使其更灵活地适应您的场景...

<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>

【讨论】：

【解决方案2】：

<div>Iteration: <span id="iteration"></span></div>

<video id="video-background" autoplay="" muted="" controls>
        <source src="https://res.cloudinary.com/video/upload/ac_none,q_60/bgvid.mp4" type="video/mp4">
</video><div>Iteration: <span id="iteration"></span></div>

var iterations = 1;
var flag = false;

    document.getElementById('iteration').innerText = iterations;

        var myVideo = document.getElementById('video-background');
    myVideo.addEventListener('ended', function () {    
                alert('end');
        if (iterations < 2) {
            this.currentTime = 0;
            this.play();
            iterations ++;          
            document.getElementById('iteration').innerText = iterations;
        } else {
            flag = true;
          this.play();
        }  

    }, false);

    myVideo.addEventListener('timeupdate', function () {    
        if (flag == true) {
        console.log(this.currentTime);
              if (this.currentTime > 5.5) {
            console.log(this.currentTime);
            this.pause();
        }
      }
    }, false);

   // Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox

【讨论】：