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

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

1 个答案: