HTML5 Video Pause on Action in Flexslider (Woothemes)

问题

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.

回答1:

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

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>

Then the 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>

That's what is working for me.

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");

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 :-)

来源：https://stackoverflow.com/questions/13497806/html5-video-pause-on-action-in-flexslider-woothemes

标签

jquery

html5

flexslider