文章/答案/技术大牛

发布

社区首页 >问答首页 >当jquery cycle2视频结束时，jquery html5触发器

问当jquery cycle2视频结束时，jquery html5触发器
EN

Stack Overflow用户

提问于 2014-01-03 14:23:54

回答 1查看 1.6K关注 0票数 0

我正在使用jquery中的cycle2插件来制作视频幻灯片。我现在有下面的代码来显示视频。

<script type='text/javascript'>//<![CDATA[ 
$(function(){
 $('video')[0].play();
 $('#cycle-2').on('cycle-after',function(e, optionHash, outgoingSlideEl,  incomingSlideEl, forwardFlag){
    $('video', outgoingSlideEl)[0].pause();
});
$('#cycle-2').on('cycle-before',function(e, optionHash, outgoingSlideEl,     incomingSlideEl, forwardFlag){
     $('video', incomingSlideEl)[0].play();
});

});//]]>  

</script>

</head>
<body>
 <div id="cycle-2" class="cycle-slideshow" data-cycle-slides="> div" data-cycle timeout="16000"

    data-cycle-fx="fade"

data-cycle-log="false"

data-cycle-loop="-1"
    data-cycle-allow-wrap="false">
    <div><video class="vid"><source src="media/vid1.webm" type="video/webm"></video></div>
    <div><video class="vid"><source src="media/vid2.webm" type="video/webm"></video></div>
    <div><video class="vid"><source src="media/vid3.webm" type="video/webm"></video></div>

</body>

它的超时时间为16秒，这是第一个视频的长度，但我想触发下一个幻灯片，当当前的视频已经完成播放。

我知道html5有个活动

    $('video.my-video').bind('ended', function(){
      // make some stuff
});

但是我不知道该把它放在哪里去触发下一个事件。

有人能帮忙吗？

slideshow

jquery

html

video

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-01-03 14:40:24

尝试将其放置在JavaScript <script>块中的任何位置：

$(document).on('ended', 'video.vid', function(){
    $(this).closest('.cycle-slideshow').cycle('next'); // trigger next slide
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20905767

复制

相似问题

问当jquery cycle2视频结束时，jquery html5触发器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当jquery cycle2视频结束时，jquery html5触发器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当jquery cycle2视频结束时，jquery html5触发器
EN