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

Posted 2021-03-31

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

<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>

答案

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

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

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