jquery幻灯片和html5视频

Question

我正在尝试将HTML5视频用作SlidesJS幻灯片中的第一个元素。问题是，如果我点击播放按钮播放视频，幻灯片应停止，直到视频完成，然后幻灯片应移动到下一张幻灯片。此外，hoverpause仅适用于图像，但不适用于html5视频元素。

到目前为止，这是我的JavaScript代码：

$(function () {
    $('#slides').slides({
        preload: true,
        preloadImage: 'Images/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
    });
});

Answer 1

Media Events概述了您可以使用的曝光事件。 您只需停止play事件上的幻灯片显示，然后在ended事件中重新启动它。

示例：<video ... onPlay="//DoJSStuffHere" onEnded="//DoOtherJSStuffHere" />

Answer 2

就像Semyazas说的那样，但是跳过on-attributes并使用javascript执行：

var v = document.getElementById("id-of-movie");
//$(v).bind('pause', function () { the video gets paused }
//$(v).bind('play', function () { do something when the video starts playing, fired by v.play()
//$(v).bind('ended', function () { the video has ended }