jquery - Flexslider 中的 HTML5 视频暂停（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类，它将触发动画..但是当幻灯片完成时您可能需要将其删除，以便在您的幻灯片循环时再次触发..我没有太多玩它的经验，但应该让你走上正确的轨道。希望有帮助:-)