Jquery Flexslider中HTML5视频动作暂停(主题)
有人在Flexslider(Woothemes)中成功地实现了HTML5视频吗?当视频开始播放时,我不知道如何暂停幻灯片放映。我已经搜索了Flexslider文档,他们只有关于如何使用Vimeo实现这一点的建议。我已经玩了一段时间Flexslider html5视频,这对我来说很有用: HTML标记基本上与任何flexslider相同,只需注意其中包含视频的幻灯片id:Jquery Flexslider中HTML5视频动作暂停(主题),jquery,html,flexslider,Jquery,Html,Flexslider,有人在Flexslider(Woothemes)中成功地实现了HTML5视频吗?当视频开始播放时,我不知道如何暂停幻灯片放映。我已经搜索了Flexslider文档,他们只有关于如何使用Vimeo实现这一点的建议。我已经玩了一段时间Flexslider html5视频,这对我来说很有用: HTML标记基本上与任何flexslider相同,只需注意其中包含视频的幻灯片id: <div class="flexslider" id="slider"> <ul class="slid
<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>
这将添加CSS类,该类将触发动画。。但您可能需要在幻灯片完成后将其删除,以便在幻灯片循环时再次触发。。我没有太多玩它的经验,但这应该会让你走上正轨。希望有帮助:-)
<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>
$(active_id).addClass("slideUp");