1

私は2つのことをしようとしています:

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ソリューションですが、私の調査では、最初のレイヤーの下にある2番目のレイヤービデオをターゲットにしたものは見つかりませんでした。

どんな助けでも大歓迎です。よろしくお願いします。

4

1 に答える 1

0

これを試して

  $('#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;
  }
于 2013-10-16T05:44:07.397 に答える