Question

我正在使用Magnific Popup并且它在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（）而不是在弹出关闭时调用pause（），这是正常的吗？

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设置为＆＃34;＆＃34;暂停后也为null。 HTML5 Video Stop onClose

Answer 2

首先暂停视频然后加载它将起作用 $("video").each(function() { this.pause(); this.load(); });

Answer 3

我知道这个问题很旧。但是，对于任何来这里寻找答案的人，您都不需要const autocomplete = new window.google.maps.places.AutocompleteService(); autocomplete.getPlacePredictions({ input }, predictions => { console.log(predictions); }); autocomplete.getPlacePredictions('London');来执行此操作。该视频已具有callbacks属性，一旦弹出窗口打开，该属性将开始播放视频。视频关闭时将停止播放。因此autoplay应该如下所示：

magnificPopup

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

3 个答案: