HTML5 视频未暂停

HTML5 Video Not Pausing

本文关键字：暂停 视频 HTML5      更新时间：2023-09-26

我正在开发一个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!');
    }
});

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

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

将此行更改为

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

要获得更明确的答案，请提供您的 html 代码。

它实际上是在我的 CSS 中。我在视频前面没有叠加层。所以我将 z 索引更改为更高的值并修复了它。我在前面有播放按钮，所以它正在播放视频，而不是叠加层。咚！

相关文章：