关闭模态后视频继续播放

Posted 2023-05-09

【中文标题】关闭模态后视频继续播放

【英文标题】：Video keeps playing after closing modal

【发布时间】：2021-09-27 18:07:23

【问题描述】：

当我关闭模式时，视频会在后台继续播放。这是一个只有 html 和 CSS 的非常小的程序，所以我不想使用 YouTube API。这是我的模态代码：

<div id="lucaModal" class="modal modal-fullscreen" role="dialog">
  <button id="lucaButton" class="btn btn-danger closeIFrame" data-dismiss="modal">
    CLOSE
  </button>
  <div class="modal-content">
    <iframe class="trailer" id="trailer" title="YoutubeVideoPlayer" 
            style="height: 100%; width: 100%;" 
            src="https://www.youtube.com/embed/mYfJxlgR2jw" frameborder="0">
    </iframe>
  </div>
</div>

我尝试了 jQuery，但我的模态不会以这种方式关闭：

$(document).ready(function()
    $("#lucaModal").modal('show');
    $("#lucaButton").click(function()
        $("#lucaModal").modal('hide');
    );
);

【问题讨论】：

你能贴出所有的代码吗？什么触发了模态？

【参考方案1】：

所以我玩弄了您的代码并找到了解决此问题的方法。 下面我用JQuery来解决你的问题。

//below is click detector that checks if the user has clicked anywhere
$('body').on('click',function()
    //if the modal is no longer visible on the screen
    if(!$('#lucaModal').is(':visible'))
        //we get the src of the current video
        var trailer = $('#trailer').attr('src');
        //and reset it, that will sort out your problem
        $('#trailer').attr('src',trailer);
    
);

只需将上面的代码复制并粘贴到您的 js 文件中，看看它是否有效。如果确实如此，那么可以尝试一下，也许您可​​以创建一种更好的方法来处理此问题。

谢谢。

【讨论】：

它仍然不适合我.. 但真的感谢您的尝试！！