HTML5 video fade out When its halfway done/ video underneath starts playing

Question

I have 2 videos. Each 7 seconds long. I need the top video to fadeout after it is halfway done playing, revealing the bottom video for 3.5 seconds, then fading back in, in an infinite loop. I am unable to get the video to fade and not sure how to make it start at a specific time. This is what I have:

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

to track the time in the video and make decisions based on that, you'll want to track the timeupdate event on the video, and then use the currentTime property to decide what to do.

This fragment will allow you to swap one video out at the 2.5s mark, play the second for 3.5s then swap back to the first ... you can elaborate based on the timer events to make it more flexible for your scenario...

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