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