兩個視頻之間的平滑過渡

Question

應該發生

我有兩個視頻元素。 第一個應該運行 6 秒，然后淡出並啟動第二個視頻，該視頻也將運行 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 動畫鏈接到該類。 如果您喜歡這個想法，請告訴我，我會發布代碼。