Плавный переход между двумя видео

Question

должно произойти

У меня есть два видео элементов. Первый должен работать в течение 6 секунд, а затем fadeOut и запускать второе видео, которое также будет работать от 0 до 6 секунд. По прошествии 6 секунд он должен исчезать, а первый должен исчезать и запускаться снова. Идея состоит в том, что я хочу, чтобы эта репликация была своего рода аккуратным увяданием, а не резким прыжком. Этот цикл должен продолжаться до тех пор, пока пользователь не остановит его. Пока что моя единственная забота - воспроизвести цикл и затухание.

У меня есть

кусок HTML и JavaScript. Мой HTML разметки просто содержит два видео элементов в контейнере:

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(); 
    } 

Это происходит

Видео начинает отлично и идет до 6 секунд, где начнется вторая. Однако, вместо приостановки первого, оба видео запускаются одновременно.

Что я делаю неправильно? Как я мог сделать эту работу? Есть идеи?

Заранее благодарен!

Редактировать

Придумал с этим .. сделал трюк. Не уверен, если это лучший способ.

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

Вы можете попробовать изменить класс видеоконтента на другой класс и создать анимацию css, связанную с этим классом. Дайте мне знать, если вам нравится эта идея, и я отправлю код.