Flexslider中的HTML5视频暂停操作（Woothemes） [英] HTML5 Video Pause on Action in Flexslider (Woothemes)

问题描述

有没有人在Flexslider（Woothemes）中成功实施HTML5视频？一旦视频开始播放，我无法弄清楚如何暂停幻灯片放映。我搜索了Flexslider文档，他们只有Vimeo如何实现这一点的建议。

Has anyone successfully implemented HTML5 video in Flexslider (Woothemes)? I am having trouble figuring out how to pause the slide show once a video begins playing. I've searched the Flexslider docs and they only have advice about how to accomplish this with Vimeo.

推荐答案

我一直在玩flexSlider html5视频暂时有用，这对我有用：

I have been playing with flexSlider html5 video for a while and this is what worked for me:

HTML标记与任何flexslider基本相同，只需记下幻灯片的id即可。其中的视频：

HTML Markup is basically the same as any flexslider, just take note of the id of the slide with the video in it:

<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而不是播放视频。类似于：

If you want to add CSS animation when the slide appears, then try adding the animation's class to the ID instead of playing the video. Something like:

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

这应该添加CSS类，它将触发动画..但你可能需要删除它当滑动完成时，如果滑动循环，它会再次触发..我没有太多使用它的经验，但这应该让你走在正确的轨道上。希望有所帮助： - ）

That should add the CSS class, which will trigger the animation.. but you may need to remove it when the slide is done so that it triggers again if your slide loops.. I don't have much experience playing with it but that should put you on the right track. Hope that helps :-)

这篇关于Flexslider中的HTML5视频暂停操作（Woothemes）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！