如何在 jQuery 模式中停止 Audio/Video 播放？

Question

我一直在想办法在关闭模式后停止播放音频，但似乎没有任何效果。

我的尝试

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

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

我很感激对这个问题的任何见解

Answer 1

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

为您的 iframe 添加一个 ID，并用该 ID 替换 #iframe-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。此脚本在隐藏和显示模式时监听 Bootstrap 事件。

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

如何在 jQuery 模式中停止 Audio/Video 播放？

How do I stop Audio/Video playback in a Modal with jQuery?

html

iframe

jquery

modal-dialog

我的尝试