Javascript HTML5视频播放/淡出，然后触发下面的视频

我试着做两件事：

1淡出一个HTML5视频，以便在其下面显示一个不同的HTML5视频

2在第一个视频淡出后，它会触发下面不同的循环HTML5视频

对于1，我无法使顶级视频淡出。请参见下面的我的代码：

Javascript:

HTML:

对于2，我正在寻找任何关于如何在顶部视频消失后立即触发底部视频播放的建议。我猜是Javascript或jQuery解决方案，但在我的研究中没有发现任何东西是针对第一层下面的第二层视频的

非常感谢您的帮助。提前非常感谢。

试试这个

  $('#vid').delay(300).fadeOut();//fade the first video
  var vid1=document.getElementById("video-loop");
  vid1.play();//play the second video

在CSS中

 #video-loop
 {
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  }
 #vid
  {
 z-index:1;
  }

---

如何定义视频对象？我看到它正在被使用，但它没有在任何地方定义。@DanGoodspeed–你是指在我的Javascript中定义视频吗？如果是这样，请提供任何建议。非常感谢谢谢你的回复。我根据你的建议调整了上面的代码，但仍然没有得到第一个视频来触发完成后的第二个视频。任何其他建议都非常感谢。在淡入顶级视频和播放第二个视频时给予同等的延迟，应该可以。你知道我会使用什么Javascript代码来延迟视频的开始吗？我已经调整了上面的代码，但这似乎不正确。再次感谢我在这里设置了一个JSFIDLE:。最新的解决方案似乎仍然不起作用。我尝试了一些新的Javascript代码，但仍然不起作用。我删除了CSS，以便清楚地看到正在发生的事情。顶部视频应淡出以显示底部视频。顶级视频一点也不褪色。最新的代码试图通过JS强制显示：无，但这也不起作用。

  $('#vid').delay(300).fadeOut();//fade the first video
  var vid1=document.getElementById("video-loop");
  vid1.play();//play the second video

 #video-loop
 {
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  }
 #vid
  {
 z-index:1;
  }