Question

应该发生

我有两个视频元素。第一个应该运行6秒然后fadeOut并启动第二个视频也将从0到6秒运行。经过6秒后，它应该是fadeOut，第一个应该淡入并再次运行。我的想法是，我希望这种过渡是一种整洁的淡化，而不是一种突然的跳跃。此循环需要继续，直到用户停止它。现在，我唯一关心的是重现循环和淡入淡出。

我有

一段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动画链接到该类。如果您喜欢这个想法，请告诉我，我会发布代码。

两个视频之间平滑过渡

1 个答案: