jquery - 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

媒体事件概述了您可以利用的公开事件。您应该简单地在事件中停止幻灯片放映并在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 }