Question

我在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
});

但我不确定在哪里触发下一个事件

任何人都可以帮忙吗？

Answer 1

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

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

当html5视频结束时，jquery cycle2触发下一步

1 个答案: