关闭Bootstrap模态框时停止所有播放内容的实现方法

嘿，这个问题问到点子上了——毕竟咱们没法提前预判用户会往模态框里塞啥播放内容，可能是YouTube嵌入、自定义视频、音频甚至是第三方播放器对吧？好消息是，完全可以在hidden.bs.modal这个回调里实现通用的停止播放逻辑，这也是Bootstrap官方推荐的模态框完全关闭后的钩子函数，时机刚刚好。

下面给你一套覆盖绝大多数场景的通用方案：

核心实现代码 #

直接把这段逻辑写到你的模态框关闭回调里就行：

$('#myModal').on('hidden.bs.modal', function (e) {
  // 1. 处理所有iframe（覆盖YouTube、Vimeo、自定义嵌入内容等）
  $(this).find('iframe').each(function() {
    // 先缓存原始地址，方便下次打开模态框时恢复（可选）
    $(this).data('original-src', $(this).attr('src'));
    // 设置为空页面强制停止iframe内的所有播放
    $(this).attr('src', 'about:blank');
  });

  // 2. 处理HTML5 video元素
  $(this).find('video').each(function() {
    this.pause();
    // 可选：把进度条拉回开头，下次打开从起始位置播放
    this.currentTime = 0;
  });

  // 3. 处理HTML5 audio元素
  $(this).find('audio').each(function() {
    this.pause();
    this.currentTime = 0;
  });
});

可选优化：恢复播放内容（如果需要） #

如果希望用户再次打开模态框时，能继续之前的内容（比如iframe里的视频回到之前的进度），可以配合show.bs.modal钩子恢复iframe的原始地址：

$('#myModal').on('show.bs.modal', function (e) {
  $(this).find('iframe').each(function() {
    const originalSrc = $(this).data('original-src');
    if (originalSrc) {
      $(this).attr('src', originalSrc);
    }
  });
});

为什么这个方案通用？ #

• 对于iframe：不管里面是啥播放内容，重置src为about:blank都会强制终止iframe内的所有运行内容，这是最稳妥的停止方式，没有兼容性问题。
• 对于HTML5的video/audio：直接调用标准的pause()方法是所有现代浏览器都支持的原生API，覆盖了绝大多数自定义视频/音频场景。

如果遇到极少数特殊的第三方播放组件（比如一些非标准的JS播放器），你可能需要针对它们的API额外处理，但上面的方案已经能解决99%的常见场景了。

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