Smooth transition between two videos

Question

Supposed to happen

I have two video elements. The first one should run for 6 seconds and then fadeOut and start the second video that will also run from 0 to 6 seconds. After the 6 seconds have passed, it should fadeOut and the first one should fadeIn and run again. The idea is that I want that transisition to be sort of a neat fade instead of an abrupt jump. This loop needs to go on until the user stop it. For now, my only concern is to reproduce the loop and the fade.

I have

A piece of HTML and JavaScript. My HTML mark up simply contains two video elements within a container:

HTML:

<div id="container" style="height: 230px; position: relative;">
   <video id="video1" style="position: absolute; top: 0; left: 0;display: none; width: 450px; height: 450px;">
      <source src="mysource.mp4" type="video/mp4">
   </video>
   <video id="video2" style="position: absolute; top: 0; left: 0; display: none; width: 450px; height: 450px;">
      <source src="mysource.mp4" type="video/mp4">
   </video>
<div id="container" style="height: 230px; position: relative;">

JavaScript:

var toggleTo = 2;
function startVideo(vid){
  var startTime = 0;
  var endTime = 8;
  var video = $('#video'+ vid).get(0);
  var video2 = $('#video'+ toggleTo).get(0);

  video.addEventListener('timeupdate', function(){
      console.log('vid1: '+ parseInt(this.currentTime,10));
      if(parseInt(this.currentTime,10) >= parseInt(endTime - 2)){
          video2.play();
          $('#video'+ toggleTo).fadeIn(1000);
          $('#video'+ vid).fadeOut(2000);
          }

      if(this.currentTime >= endTime){
          video.pause();
          }
      },false);

  video2.addEventListener('timeupdate', function(){
      console.log('vid2: '+ parseInt(this.currentTime,10));
      if(parseInt(this.currentTime,10) >= parseInt(endTime - 2)){
          $('#video'+ vid).fadeIn(1000);
          $('#video'+ toggleTo).fadeOut(2000);
          video.currentTime = 0;
          video.play();
          }

      if(this.currentTime >= endTime){
          video2.pause();
          }
      },false);

  video.currentTime = 0;
  video.play(); 
  }

This happens

Video is starting fine and goes on until 6 seconds, where the second one is going to start. However, instead of pausing the first one, both videos run at the same time.

What am I doing wrong? How could I make this work? Any Ideas?

Thanks in advance!

Edit

Came up with this.. did the trick. Not sure, if it's the best way though.

var hasEntered = false;
var hasEntered2 = false;
function startVideo(vid){
  var startTime = 0;
  var endTime = 13;

  video.addEventListener('timeupdate', function(){
     if(parseInt(this.currentTime,10) >= parseInt(endTime - 2)){
          if(hasEntered === false){
              hasEntered2 = false;
              video2.currentTime = 0;
              video2.play();
              $('#video2').fadeIn(2000);
              $('#video1').fadeOut(3000);
              hasEntered = true;
              }
          }

      if(this.currentTime >= endTime){
          video.pause();
          }
      },false);


  video2.addEventListener('timeupdate', function(){
      if(parseInt(this.currentTime,10) >= parseInt(endTime - 2)){
          if(hasEntered2 === false){
              hasEntered = false;
              $('#video1').fadeIn(2000);
              $('#video2').fadeOut(3000);
              video.currentTime = 0;
              video.play(); // and work!!
              hasEntered2 = true;
              }
          }

      if(this.currentTime >= endTime){
          video2.pause();
          }
      },false);


  video.currentTime = 0;
  video.play();
  }

Answer 1

You could try changing the class of the video container to another class and have a css animation linked to that class. Let me know if you like this idea and I will post code.