jQuery幻灯片和html5视频

Question

我正在尝试将HTML5视频用作SlidesJS幻灯片放映中的第一个元素。 问题是，如果我单击“播放”按钮以播放视频，则幻灯片应停止播放，直到视频完全播放完毕，然后幻灯片应移至下一张幻灯片。 另外，悬停功能仅适用于图片，不适用于html5视频元素。

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

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

Answer 1

Media Events概述了您可以利用的公开事件。 您只需要在play事件上停止幻灯片放映，然后在ended事件上重新开始play 。

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

Answer 2

就像Semyazas所说的，但是跳过属性并使用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 }