在滑块中播放视频，然后在最后换出图像

Question

所以我目前在HeroCarousel slider 内播放了一个视频。滑块前有一个图像，滑块后有另一个图像。

我的代码：

<div data-time="8000"  data-prev-src="/media/splash/slider-left.png" data-next-src="/media/splash/slider-right.png">
  <a href="/island-careers/retail.html">
    <img src="/media/island/splash/now-hiring-splash.jpg" />
  </a>
</div>
<div data-time="9000" data-video="true" data-prev-src="/media/splash/slider-left-black.png" data-next-src="/media/splash/slider-right-black.png" id="video">
  <a href="/catalog/island-collections/packing-list/">
    <video width="1275" height="557" preload="auto" id="myVideo">
      <source src="/media/island/splash/video-2.mp4" type="video/mp4">
    </video>
    <img src="/media/island/splash/escape-splash.jpg" />
  </a>
</div>
<div data-time="8000"  data-prev-src="/media/splash/slider-left.png" data-next-src="/media/splash/slider-right.png">
  <a href="/catalog/mens-resort-wear/classic-shirts/breaker-striped-red-linen-shirt.html">
    <img src="/media/island/splash/breakers-shirt-splash.jpg" />
  </a>
</div>

所以我的问题是页面加载时正在播放视频。当幻灯片进入视图时，视频已经在其完成的帧中。我希望视频在幻灯片进入视图时播放，而不是在页面加载时播放。滑块将 current 类添加到当前幻灯片中，因此我开始编写以下脚本以使其播放：

//playing video
jQuery(document).ready(function() {
  $play = 0;

  if($play > 0) {
    if(jQuery("article#video").hasClass("current")) {
      jQuery("#myVideo").get(0).play();
      $play++;
    }
  }

});

此脚本无法完全运行。

我还想在视频结束后将视频换成视频下方的图片（视频只能播放一次）

Answer 1

实现此目的的一种方法是使用标志并监听DOMSubtreeModified 和ended 事件。

仅在幻灯片可见时开始播放视频，您可以这样做

var canPlay = false, played = false;
$('.hero-carousel article').bind('DOMSubtreeModified', function(e) {
    if(played){     // flag to make sure it is played only once.
        $('.hero-carousel article').unbind('DOMSubtreeModified');
    }else if($(e.target).hasClass('current')){
        canPlay = true;     // flag to make sure, playing starts only when slide is current.
        var video = $(e.target).find('video')[0];
        if(video){
            video.play();            
        }
    }
});

$('.hero-carousel article video').bind('play', function(){
    if(!canPlay){
        this.pause();
        this.currentTime = 0;
    }else{
        played = true;
    }               
});    

为了在视频完成后隐藏视频，您可以这样做：

$('.hero-carousel article video').bind('ended', function(){
    this.style.display = 'none';
});

fiddle demo