关闭Bootstrap模态框后iframe视频仍后台播放的问题排查与修复

问题原因 #

原有关闭模态框的逻辑中，仅把iframe的src改回了不带自动播放参数的原视频地址，iframe并没有卸载已经加载的视频资源，浏览器会继续维持视频播放进程，因此音频会在后台持续输出。

修复代码 #

HTML部分 #

现有HTML结构无需调整，可直接复用：

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>       
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always" allow="autoplay"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery逻辑修正 #

核心改动：模态框关闭时直接清空iframe的src属性，彻底卸载视频资源，从根源停止播放。

$(document).ready(function () {
    let videoSrc;
    $('.btn-play').click(function () {
        videoSrc = $(this).data("src");
    });

    $('#videoModal').on('shown.bs.modal', function () {
        $("#video").attr('src', videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
    })

    $('#videoModal').on('hide.bs.modal', function () {
        // 清空src直接卸载视频资源，停止所有播放和网络请求
        $("#video").attr('src', '');
    })
});

注意点 #

• 原代码中写在$(document).ready回调里的console.log($videoSrc)属于无效代码：页面加载时还未点击播放按钮，变量未赋值，永远会输出undefined，直接删除即可
• 如果后续换成原生<video>标签实现播放，不需要清空src，关闭模态框时调用视频DOM的pause()方法，再把currentTime设为0，就能实现停止播放+重置进度的效果
• 关闭模态框时不要给iframe保留任何视频相关的src值，只要src还指向视频资源，浏览器就不会终止对应的播放进程

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