如何使用 jQuery 在模态中停止音频/视频播放？

Posted 2023-05-09

【中文标题】如何使用 jQuery 在模态中停止音频/视频播放？

【英文标题】：How do I stop Audio/Video playback in a Modal with jQuery?

【发布时间】：2021-10-11 16:12:20

【问题描述】：

我一直在试图弄清楚如何在关闭模式后停止播放音频，但似乎没有任何效果。

我的尝试

<script>
var docReadyCodeForModal = setInterval(function() 
    if(jQuery) 
        clearInterval(docReadyCodeForModal);
       $("#myModal").modal('show');
       $("#stopClose").click(function()
           $("#myModal").modal('pause');
    );
    
, 100);
</script>

<div aria-hidden="true" class="fade modal" id="myModal" style="display:none">
<div class="modal-lg modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="text-align:center">WELCOME TO THE THUNDERDOME!!!</h5>
<button id="stopClose" class="close" data-dismiss="modal" type="button">&times;</button></div>

<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item video-not-resize" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/yGwjyodRst4?autoplay=1" title="YouTube video player"></iframe></div>
</div>
</div>
</div>
</div>

注意：出于隐私原因删除视频链接。

感谢您对此问题的任何见解

【参考方案1】：

关闭模式时停止播放视频的脚本

为您的 iframe 添加一个 id 并将 #iframe-id 替换为该 id。

$(document).ready(function()

        var url = $("#iframe-id").attr('src');
            
        $("#myModal").on('hide.bs.modal', function()
            $("#iframe-id").attr('src', '');
        );
            
        $("#myModal").on('show.bs.modal', function()
            $("#iframe-id").attr('src', url);
        );

);

您正在使用引导程序。此脚本在隐藏和显示模式时侦听 Bootstrap 事件。

它在关闭模式时从iframe src 属性中删除url，并在模式打开时添加url。

【讨论】：

完美运行，谢谢！