Bootstrap模态框关闭后视频自动重启问题求助

嘿，我来帮你搞定这个视频自动重启的问题！

问题根源 #

你遇到的视频偷偷重启的问题，罪魁祸首是这段代码：

jQuery("#videoModal").on('hidden.bs.modal', function (e) {
  jQuery("#videoModal iframe").attr("src", jQuery("#videoModal iframe").attr("src"));
});

你本来是想通过重置iframe的src来停止视频，但你的YouTube嵌入链接里带了autoplay=1参数。当你把src重新设为原地址时，相当于让浏览器重新加载整个视频页面，而autoplay=1会强制视频加载完成后自动播放——这就是为什么关闭模态框几秒后，视频会在后台偷偷重启的原因。

解决办法 #

给你两种实用的解决方案，按需选择：

方法一：清空iframe src（简单直接） #

这种方法不需要额外API，直接通过清空iframe的src来停止视频，下次打开时再恢复原链接。修改后的代码如下：

jQuery(document).ready(function(){
  // 先保存原始的视频链接
  const originalVideoSrc = jQuery("#videoModal iframe").attr("src");
  // 初始化显示模态框
  jQuery('#videoModal').modal('show');

  // 模态框隐藏时清空iframe的src，彻底停止视频
  jQuery("#videoModal").on('hidden.bs.modal', function (e) {
    jQuery("#videoModal iframe").attr("src", "");
  });

  // 可选：如果需要再次打开模态框时自动播放，监听显示事件恢复原链接
  jQuery("#videoModal").on('show.bs.modal', function (e) {
    jQuery("#videoModal iframe").attr("src", originalVideoSrc);
  });
});

这样修改后，关闭模态框时视频直接停止加载和播放；下次打开时重新加载带autoplay=1的链接，视频会正常自动播放。

方法二：用YouTube API精确控制（体验更好） #

如果想要更精细的控制（比如暂停视频而非重新加载，下次打开可以续播），可以使用YouTube的JavaScript API：

1. 先修改iframe的src，添加enablejsapi=1参数，开启API控制权限：

<iframe width="100%" height="350" src="https://www.youtube.com/embed/HBdcL7YsdBY?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

2. 然后修改脚本，通过postMessage给iframe发送暂停指令：

jQuery(document).ready(function(){
  jQuery('#videoModal').modal('show');

  jQuery("#videoModal").on('hidden.bs.modal', function (e) {
    const iframe = document.querySelector("#videoModal iframe");
    // 向YouTube iframe发送暂停命令
    iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
  });
});

这种方法不会重新加载视频，只是暂停播放，下次打开模态框时可以继续从暂停的位置播放，用户体验更流畅。

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