Question

我希望能够在单击按钮时播放视频，然后在中使另一个视频淡入淡出，而在单击另一个按钮时淡出当前视频。这需要是一种动态过渡，用户随机单击（即从1到3，反之亦然）。这是我当前的代码，没有任何褪色：

JS：

<script>
video = document.getElementById('video');
source = document.getElementById('source');

window.PlayVideo = function(srcVideo){
video.pause();
source.setAttribute('src', srcVideo);
video.load();
video.play();
}

</script>

HTML：

<a onclick="PlayVideo('fire.webm');"><button>Play Video 1</button></a>

<a onclick="PlayVideo('smoke.webm');"><button>Play Video 2</button></a>

<a onclick="PlayVideo('merged-rain.webm');"><button>Play Video 3</button></a>

<div id="xxxxxx">

<div>

<video id="video" width="520" height="360" loop muted controls><source id = "source"/></video>

</div>
</div>

示例链接：http://nov-exl.dx.am/movie%20change.html
任何帮助，将不胜感激，谢谢。

Answer 1

怎么样呢？

var video = document.getElementById('video');
var source = document.getElementById('source');
var timer = void 0;

  window.PlayVideo = async function(srcVideo){      
    source.setAttribute('src', srcVideo);
     fade('out');
     try {
      await video.pause();
      await video.load();
      await video.play();
      fade('in');
    } catch(err) {
      console.log("Promise rejected");
    }

  }

  function fade(opts){
      if(typeof opacityTimer !== 'undefined') clearInterval(opacityTimer);
      var opacity = opts === 'in' ? 0 : 1;
      opacityTimer = setInterval(function() {
      if ((opts === 'in' && opacity >= 1) ||(opts=== 'out' && opacity <=0) ){
        clearInterval(timer);
      }
      opacity =  opts === 'in' ? opacity+(opacity * 0.1 || 0.1) : opacity-(opacity * 0.1 || 0.1);
      video.style.opacity = opacity;
      video.style.filter = 'alpha(opacity=' + opacity * 100 + ")";
    }, 25);    
  }

如何淡出当前视频并淡入新视频onclick？

1 个答案: