javascript - 视频弹出模式关闭时在后台播放

Question

我正在使用放大弹出窗口，它在 Chrome 中工作正常，但在 Mozilla 和 IE 上，当我关闭弹出模式时，音频仍会在后台播放。

我在网上搜索了其他有此问题的人，但找不到有效的解决方案。该视频只是一个 html 视频，没有 YouTube 或任何其他内容。这是我正在使用的代码。

function displayVideoAsPopup(selector,attr) {
    $(selector).each(function(i,e) {
        var videoSrc=$(e).attr(attr);
        if($(e)[0].localName=="a"){
            $(e).attr("href","javascript:void(0)"); 
        }
        $(e).magnificPopup({
            items: {
                type: 'inline',
                src: '<div class="container"><video controls preload="auto" autoplay width="100%" height="100%" src="' + videoSrc + '"></video></div>',
            },
            callbacks: {
                open: function() {
                    $(this.content).find('video')[0].play();

                },
                close: function() {
                    $(this.content).find('video')[0].load();
                }
            }
        });
    });

Answer 1

您似乎在视频上调用了 load()，而不是在弹出窗口关闭时调用了暂停()，这正常吗？

function displayVideoAsPopup(selector, attr) {
    $(selector).each(function (i, e) {
        var videoSrc = $(e).attr(attr);
        if ($(e)[0].localName == "a") {
            $(e).attr("href", "javascript:void(0)");
        }
        $(e).magnificPopup({
            items: {
                type: 'inline',
                src: '<div class="container"><video controls preload="auto" autoplay width="100%" height="100%" src="' + videoSrc + '"></video></div>',
            },
            callbacks: {
                open: function () {
                    $(this.content).find('video')[0].play();

                },
                close: function () {
                    // Call pause() here instead of load()
                    $(this.content).find('video')[0].pause();
                }
            }
        });
    });

暂停后，您也应该将视频元素的 src 设置为“”或 null。 HTML5 Video Stop onClose