HTML5視頻播放/淡出然后在下面觸發視頻

Question

我正在嘗試做兩件事：

1）淡出HTML5視頻，使其在下面顯示不同的HTML5視頻。

2）在第一個視頻淡出后，它會觸發下面的另一個循環HTML5視頻。

對於＃1，我無法使頂部視頻消失。 請參閱下面的代碼：

使用Javascript：

<script type="text/javascript">
     video.addEventListener('ended', function () {
           $('#vid').addClass('hide');
           $('video').delay(100).fadeOut();       
     }, false);
    video.play();
    var vid1=document.getElementById("video-loop");
    vid1.addEventListener(function () {
                $('video').delay(100);
            }, false);
    vid1.play();
</script>

HTML：

<div id="#video">
   <video id="vid" autoplay preload="auto">
      <source src="videos/interactive2_3.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="videos/interactive2_3.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="videos/interactive2_3.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"' />
   </video>
   <video id="video-loop" preload="auto" loop>
      <source src="videos/interactive2-loop.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="videos/interactive2-loop.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="videos/interactive2-loop.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"' />
   </video>
</div>

對於＃2，我正在尋找有關如何在頂部視頻淡出后立即觸發底部視頻播放的任何建議。 我正在猜測Javascript或jQuery解決方案，但我在研究中沒有發現任何針對第一個視頻下面的第二個視頻的東西。

任何幫助深表感謝。 非常感謝。

Answer 1

嘗試這個

  $('#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;
  }