jquery 幻灯片和 html5 视频

发布于 2024-11-27 14:32:37 字数 434 浏览 2 评论 0原文

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

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

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

原文

I am trying to use an HTML5 video as the first element in a SlidesJS slideshow. The problem is if I click on the play button to play the video, the slideshow should stop until the video finishes completely and then the slideshow should move to the next slide. Also, the hoverpause works only on images but not on html5 video element.

Here's my JavaScript code so far:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

物价感观 2024-12-04 14:32:37

媒体事件概述了您可以利用的公开事件。
您只需在 play 事件发生时停止幻灯片放映，并在 ending 事件发生时重新启动幻灯片即可。

示例：

回复收藏 0 原文

琉璃梦幻 2024-12-04 14:32:37

就像 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 }

Like Semyazas says, but skip the on-attributes and do it with 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 }

回复收藏 0 原文

~没有更多了~