离线环境下视频模态框无法运行及关闭后音频续播问题求助

一、本地资源引用修复 #

先确认你下载的jQuery和Bootstrap JS版本和原方案完全一致——就是jQuery 1.11.3、Bootstrap 3.3.4，然后按下面的步骤来：

• 下载对应文件：
  • 下载jquery-1.11.3.min.js
  • 下载bootstrap.min.js
• 梳理本地文件结构（假设你的HTML在html/pages/目录，可根据实际调整）：

  项目根目录/
  ├── css/
  │   ├── modal.css
  │   └── buttons.css
  ├── js/
  │   ├── jquery-1.11.3.min.js
  │   └── bootstrap.min.js
  └── html/
      └── pages/
          └── 你的页面.html
  

• 修正引用路径：

  <head>
    <link rel="stylesheet" href="../../css/modal.css">
    <link rel="stylesheet" href="../../css/buttons.css">
    <!-- 替换成本地JS文件引用 -->
    <script src="../../js/jquery-1.11.3.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
  </head>
  

• 关键注意点：
  • 检查下载的JS文件是否完整，有没有损坏
  • 若部署在Linux服务器上，路径要区分大小写
  • 自定义的视频模态框JS代码必须放在jQuery和Bootstrap JS引用之后，不然会报错

二、关闭模态框时停止视频播放 #

原代码只重置了视频源，但没暂停视频，导致音频继续播放。直接替换你的JS代码：

$(function() {
  $(".video").click(function () {
    var theModal = $(this).data("target"),
        videoSRC = $(this).attr("data-video"),
        videoElement = $(theModal + ' video')[0]; // 获取原生video元素
    
    // 设置视频源并加载
    $(theModal + ' source').attr('src', videoSRC);
    videoElement.load();
  });

  // 监听Bootstrap模态框的关闭事件（完全关闭时触发）
  $('#videoModal').on('hidden.bs.modal', function () {
    var videoElement = $(this).find('video')[0];
    // 暂停视频并重置到开头
    videoElement.pause();
    videoElement.currentTime = 0;
    // 清空视频源，避免下次打开残留缓存
    $(this).find('source').attr('src', '');
  });
});

代码说明： #

• 用hidden.bs.modal事件代替仅监听关闭按钮，不管是点关闭按钮还是点击模态框外部关闭，都能触发停止逻辑
• 调用原生video的pause()暂停播放，currentTime = 0重置视频到开头
• 清空视频源可避免下次打开时加载旧缓存

三、完整离线可用代码示例 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>离线视频模态框</title>
  <link rel="stylesheet" href="../../css/modal.css">
  <link rel="stylesheet" href="../../css/buttons.css">
  <script src="../../js/jquery-1.11.3.min.js"></script>
  <script src="../../js/bootstrap.min.js"></script>
  <script>
    $(function() {
      $(".video").click(function () {
        var theModal = $(this).data("target"),
            videoSRC = $(this).attr("data-video"),
            videoElement = $(theModal + ' video')[0];
        
        $(theModal + ' source').attr('src', videoSRC);
        videoElement.load();
      });

      $('#videoModal').on('hidden.bs.modal', function () {
        var videoElement = $(this).find('video')[0];
        videoElement.pause();
        videoElement.currentTime = 0;
        $(this).find('source').attr('src', '');
      });
    });
  </script>
</head>
<body>
  <!-- 替换成你的本地视频路径 -->
  <button class="btn btn-lg video" data-video="../../videos/video1.mp4" data-toggle="modal" data-target="#videoModal">播放视频1</button>
  <button class="btn btn-lg video" data-video="../../videos/video2.mp4" data-toggle="modal" data-target="#videoModal">播放视频2</button>

  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <video controls width="100%">
            <source src="" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

四、测试验证 #

1. 确认所有资源（CSS、JS、视频）都在本地路径下
2. 断开网络后打开页面测试：
   • 点击播放按钮，模态框正常弹出并播放视频
   • 关闭模态框，视频音频立即停止
   • 切换不同视频按钮，能正常加载对应本地视频

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