Bootstrap Modal关闭后视频仍持续播放问题求助

修复代码 #

你只需要将原有JS逻辑替换为下方代码即可直接解决问题：

$(function() {
  // 点击视频链接加载对应视频到模态框
  $(".video").click(function () {
    const theModal = $(this).data("target");
    const videoSRC = $(this).attr("data-video");
    $(`${theModal} source`).attr('src', videoSRC);
    $(`${theModal} video`)[0].load();
    $(`${theModal} video`)[0].play();
  });

  // 监听模态框隐藏事件，覆盖所有关闭模态框的场景
  $('#videoModal').on('hidden.bs.modal', function () {
    // 主动暂停视频播放
    $(this).find('video')[0].pause();
    // 清空视频源地址
    $(this).find('source').attr('src', '');
    // 重载video元素清空缓存，彻底终止播放
    $(this).find('video')[0].load();
  });
});

修改说明 #

• 新增Bootstrap原生的hidden.bs.modal事件监听，不管是点击关闭按钮、点击模态框外部空白区域、按ESC键关闭模态框都会触发该事件，覆盖所有关闭场景
• 关闭模态框时先主动调用pause()方法暂停播放，再清空视频源并重载video元素，彻底终止视频流的加载和播放
• 将关闭事件绑定逻辑从点击视频的逻辑中抽离，避免重复点击视频时重复绑定事件引发的异常
• 补充主动调用play()的逻辑，适配不同浏览器的自动播放策略，保证视频正常加载后自动播放

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