动态切换Bootstrap模态框视频源无法播放问题求助及解决方案

你遇到的核心问题是：修改视频<source>的src属性后，浏览器不会自动重新加载新的视频资源，再加上原代码里的一处拼写错误，导致模态框切换视频后无法正常播放。我来帮你拆解问题并给出完整的解决思路：

原代码的两个问题 #

• 笔误：moda1l.find('.modal-title').text(user)里的moda1l是拼写错误，应该是modal
• 缺少资源重载：仅修改src后，浏览器不会主动读取新地址，必须手动触发视频加载

完整可运行代码 #

页面与模态框HTML（保留你的结构，补全模态框完整框架）

<div class="pb-2 pr-0 col col-xs-12 col-sm-6 col-md-3 col-lg-2 col-xl-2" id="item">
  <a href="#" data-toggle="modal" data-target="#exampleModal" data-user="9GAG" data-link="https://video.twimg.com/amplify_video/1343598947286183946/vid/720x900/Jg8plRtix-yjzP6g.mp4">
    <img class="rounded" src="https://pbs.twimg.com/amplify_video_thumb/1343598947286183946/img/_WUUCNjodgFAwfdw.jpg:thumb" alt="9GAG">
  </a>
</div>

<!-- 完整Bootstrap模态框结构 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="videoContainer">
          <video id="myVideo" width="1280" height="720" controls poster="" class="myvideo img-fluid">
            <source src="" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>
</div>

最终JavaScript代码

// 模态框关闭时暂停视频，避免后台偷偷播放占用资源
$('#exampleModal').on('hide.bs.modal', function (event) {
  let video = document.getElementById('myVideo');
  video.pause();
});

// 模态框打开时加载并播放新视频
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);
  var link = button.data('link');
  var user = button.data('user');
  var modal = $(this);
  
  // 设置模态框标题
  modal.find('.modal-title').text(user);
  // 更新视频源地址
  $('#myVideo source').attr('src', link);
  // 强制浏览器重新加载视频资源（关键步骤）
  $('#myVideo')[0].load();
  // 自动播放视频（部分浏览器需要用户交互触发，若无法自动播放可删除此句）
  $('#myVideo')[0].play();
})

关键细节解释 #

1. load()方法：这是解决视频不播放的核心，修改src后必须调用视频元素的load()，让浏览器重新解析新的资源地址，否则会沿用之前的缓存内容。
2. 关闭时暂停：添加hide.bs.modal监听，避免模态框关闭后视频在后台继续播放，影响用户体验和性能。
3. 拼写修正：把原代码里的moda1l改成modal，确保模态框标题能正常显示。

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