Laravel项目中关闭bootstrap modal后视频仍持续播放问题求助

问题根因 #

• 你使用<iframe>元素加载视频资源，.pause()是原生<video>标签的专属DOM方法，无法直接作用于iframe元素，所以关闭模态框的暂停逻辑完全不生效
• 代码中$('#video').html(getVideo.video_link)是无效语句，iframe的内容由src属性控制，不需要为其插入HTML内容
• 点击事件回调没有显式传入event参数，部分低版本浏览器会出现event未定义的报错
• 拼接视频地址参数时代码有换行，会导致生成的URL带多余空格，可能引发视频加载失败

解决方案 #

最通用且无跨域限制的解决方式是：关闭模态框时直接清空iframe的src属性，再次打开模态框时会重新赋值加载视频，无需额外适配不同视频平台的播放器API。

修改后的完整JS代码 #

$(document).ready(function(){
    // 回调函数显式传入event参数
    $(document).on('click', '.video-btn', function(event){
        event.preventDefault();
        let id = $(this).data('id');
        $.ajax({
            url: "/watchvideo/"+id,
            dataType:"json",
            success:function(getVideo){
                var d = getVideo.video_link;
                // 删除无效的html赋值语句，参数拼接写在同一行
                $("#video").attr("src", d+"?autoplay=1&modestbranding=1&showinfo=0");
                $('#myModal').modal('show');
            }
        })
    });

    $("#myModal").on('hidden.bs.modal', function (e) {
        // 清空iframe的src即可停止视频播放
        $("#video").attr('src', '');
    });
});

内容的提问来源于stack exchange，提问作者azim