关闭弹出窗口后，弹出视频继续在后台播放答案

【问题标题】：Popup video keeps playing in background after closing the popup关闭弹出窗口后，弹出视频继续在后台播放
【发布时间】：2018-03-02 06:14:01
【问题描述】：

我有一个按钮，点击后会弹出一个可以播放的视频。问题是，如果您在播放视频时关闭弹出窗口，关闭弹出窗口不会停止视频，而是继续在后台播放。

<div>
    <a id="click-me">Click Me</a>
</div>

<div id="popup-mpdal" style="display:none;">
    <div class="">
        <video id="videoplayer" controls poster='<?php echo $block->getUrl("pub/media/video/")?>whats-your-story.png'>
            <source src='<?php echo $block->getUrl("pub/media/video/")?>this-is-chris-saint-long-version.mp4' type="video/mp4">
        </video>
    </div>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-mpdal'));
            $("#click-me").on('click',function(){ 
                $("#popup-mpdal").modal("openModal");
            });

        }
    );
</script>

【问题讨论】：

标签： javascript jquery magento html5-video

【解决方案1】：

这里发生了什么有点不清楚，但是当模式关闭时，您不会做任何事情来暂停或重置视频。这是一个非常简单的方法来阻止它。

 var video = document.getElementById("videoplayer");
 function pauseVideo(){
      video.pause();
 }

现在，如果您在按钮的点击处理程序中调用 pauseVideo()，它应该会停止视频。

【讨论】：