HTML5視頻在Flexslider（Woothemes）中暫停執行

Question

是否有人在Flexslider（Woothemes）中成功實現了HTML5視頻？我無法確定在視頻開始播放後如何暫停幻燈片放映。我搜索了Flexslider文檔，他們只有關於如何使用Vimeo完成此任務的建議。

Answer 1

我一直在玩flexSlider HTML5視頻了一段時間，這是爲我工作：

HTML標記是基本相同的任何flexslider，只取與視頻中的幻燈片ID的音符它：

<div class="flexslider" id="slider"> 
    <ul class="slides"> 
    <li id="slide1"><img src="./images/slides/slide1.jpg"></li> 
    <li id="slide2"><img src="./images/slides/slide2.jpg"></li> 
    <li id="slide3"><video id="myVideo" src="./videos/myVideo.mp4" style="width:100%;"></video></li> 
    </ul> 
</div> 

那麼Java

<script> 
$(window).load(function() { 
    $('.flexslider').flexslider({ 
    animation: "fade", 
    controlNav: false, 
    slideshowSpeed: "5000", 
    after: function(){ 
     // sets active_id to the active slide 
     var active_id = $('.flex-active-slide').attr('id'); 
     //if the active slide is the video slide... 
     if(active_id == "slide3"){ 
      //play the video and pause the slider 
      myVideo.play(); 
      $('.flexslider').flexslider("pause"); 
      //when the video has ended, go to the next slide and play the slider 
      myVideo.onended = function(){ 
       $('.flexslider').flexslider("next"); 
       $('.flexslider').flexslider("play"); 
      } 
     } 
    }, 
    }); 
}); 
</script> 

這就是爲我工作。

如果您想在幻燈片出現時添加CSS動畫，請嘗試將動畫的類添加到ID中，而不是播放視頻。喜歡的東西：

$(active_id).addClass("slideUp"); 

這應該添加CSS類，這將觸發動畫..但使其再次觸發，如果你的幻燈片循環您可能需要將其刪除當滑動完成..我不沒有太多的經驗玩它，但這應該把你放在正確的軌道上。希望有幫助:-)