1

我正在尝试做两件事：

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 解决方案，但我在研究中没有发现任何针对第一个分层视频下方的第二个分层视频。

任何帮助深表感谢。提前非常感谢。

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 回答