如何淡出当前视频和淡入新视频onclick

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