HTML5 视频不暂停答案

【问题标题】：HTML5 Video Not PausingHTML5 视频不暂停
【发布时间】：2012-05-31 03:43:09
【问题描述】：

我正在开发一个包含两个视频的 iPad HTML 应用程序。 HTML 代码是动态加载的。该页面有两个视频，其文本对应于它们。这些视频也只有两个控件。播放和暂停。但是我遇到的问题是视频只会在另一个播放时暂停。基本上在我的 if / else 语句中根本没有调用 else。这是我的代码。任何人都知道为什么尝试再次单击叠加层时它不会暂停？提前谢谢！

$('div[class*="video-overlay"]').bind('mousedown', function() {

    var video       = $(this).next('video')[0];
    var text        = $(this).attr('data-play');

    if (video.paused) {

        video.play();

        $('p').addClass('fade');
        $('#' + text).removeClass('fade');

        $(this).removeClass('overlay');
        $('div[class*="video-overlay"]').not(this).addClass('overlay');

        $(this).children().removeClass('video-play');

        $('video').not($(this).next(el)).get(0).pause();

        $('.play').not($(this).children()).addClass('video-play');

        $(video).on('ended', function() {
            $(this).prev('div').children().addClass('video-play');
            video.pause();
        });

    } else {

        video.pause();
        console.log('Hey mom, I paused all by myself!');
    }

});

【问题讨论】：

在您调用 pause() 后检查是否已暂停，如果可能，请删除其中一个视频，以便它只是您正在调试的一个视频。
在调试期间，可能只想让它 if (paused) play() else pause() 看看是否有效。 firebug / f12 / 等，如果可能的话，逐步进行。 :)

标签： javascript jquery html html5-video

【解决方案1】：

没有你的html，我无法确定，所以我只能猜测。

var video       = $(this).next('video')[0];

将此行改为

var video       = $(this).find('video')[0];

如需更明确的答案，请提供您的 html 代码。

【讨论】：

【解决方案2】：

它实际上在我的 CSS 中。我没有在视频前面覆盖。所以我将 z-index 更改为更高的值并修复它。我前面有播放按钮，所以它正在播放视频，而不是覆盖。呵呵！

【讨论】：