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