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

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

```