jquery幻灯片和html5视频答案

【问题标题】：jquery slides and html5 videojquery幻灯片和html5视频
【发布时间】：2013-07-16 10:05:25
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery html html5-video slidesjs

【解决方案1】：

Media Events 概述了您可以利用的公开事件。您只需在 play 事件上停止幻灯片放映并在 ended 事件上重新启动它。

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

【讨论】：

感谢 semyazas。这是有道理的。但是如何获取视频元素的当前状态？
您可以检查 playing 状态以及 pause 但我个人认为这足以在开头停止幻灯片 play 并继续运行pause 因为这些事件必须发生才能使视频运行或停止。查看我的更新答案
嗯，我不建议在任何元素上添加属性..guh！完全使用 javascript 完成。
这只是一个基本示例，让他有机会进行快速检查。但确实如此，在这种情况下，这个例子远非理想

【解决方案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 }

【讨论】：

var v = $('#id-of-movie'); 如果他还在使用 jQuery ;-)
不能那样做，如果那样做，还需要加上$('#id-of-movie').get(0); :)
它仍然比切换出框架并重新进入要好得多。这就是语法错误
顺便说一句，这给了我一些思考。我记得成功没有使用.get(0); 所以我试了一下：jsfiddle.net/yQFQX，正如你所看到的......它有效
这没有意义。我正在使用一个 ID，它必须是唯一的。所以我所做的一切都是和你一样，但使用的是jQuery语法，而不是常规的javascript。那是因为 id-selector 使用了document.getElementById('#idgoeshere')，所以如果你必须添加 get(0)，你的代码也是一样的。