Question

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

});

Answer 1

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

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

将此行更改为

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

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

Answer 2

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

HTML5视频未暂停

2 个答案: