Bootstrap 3 模式中的 HTML 5 视频在单击关闭按钮时不会停止播放视频

Question

我正在尝试将 HTML 5 视频放入 Bootstrap 3 模式，但是当我点击关闭按钮时，视频只是移动到背景并继续播放。

这是我的模态代码：

    <div aria-hidden="true" aria-labelledby="modal-video1-label" class="modal theme-alt modal-center-vertical" id="modal-video1" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">           
                <div class="modal-body">
                <video controls="" preload="metadata" id="videoModal-1" style="width: 100%; height:auto; margin:0 auto; frameborder:0;">
                    <source src="tour-welcome_to_pethub-20230425a.mp4" type="video/mp4"> Your browser does not support the video tag. </source>
                </video>
                </div>
               <div class="modal-footer">
               <button class="btn btn-info closemodal" data-dismiss="modal" type="button">Close</button>
               </div>
            </div>
        </div>
    </div>

我遇到过一些类似的问题并尝试了我遇到的解决方案，但没有一个对我有用。这些我都试过了：

$("#modal-video1").on("hidden.bs.modal", function () {
    const video = document.getElementById("videoModal-1");
    video.pause();
});

$("#modal-video1").on("hidden.bs.modal", function () {
    $("#videoModal-1")\[0\].pause();                  
});

$(".closemodal").click(function(){
    const video = document.getElementById("videoModal-1");
    video.pause();
}

$('#modal-video1').on('hidden.bs.modal', function (e) {
    $("#videoModal-1").get(0).pause();
})

$('#modal-video1').on('hide.bs-modal', function(e) {
    $('#videoModal-1').trigger('pause');
});

我不是很精通 JS，所以不确定我做错了什么。非常感谢任何帮助。