Bootstrap Modal中Video.js视频显示异常问题求助

我之前也碰到过一模一样的问题——Bootstrap Modal能正常弹出来，但视频控件要么布局乱掉，要么点击没反应，甚至再次打开Modal时视频直接崩了。其实核心原因就是Modal是动态显示/隐藏的，Video.js初始化时没法正确识别隐藏状态下的容器尺寸，加上关闭Modal后没正确处理视频实例，导致后续渲染异常。下面是我亲测有效的解决方案：

一、关键：在Modal完全显示后再处理Video.js #

Modal隐藏时，视频容器的尺寸是无法被正确计算的，所以必须等Modal完全显示（shown.bs.modal事件触发）后，再初始化Video.js或者刷新它的尺寸。

完整代码示例 #

HTML结构

<!DOCTYPE html>
<html>
<head>
  <title>Popup Video</title>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- 引入Video.js CSS -->
  <link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />
  <style>
    /* 调整Modal样式，避免影响视频控件 */
    .modal-body {
      padding: 0; /* 去掉默认内边距，让视频填满Modal内容区 */
      overflow: hidden; /* 防止视频控件超出Modal范围 */
    }
    .video-js {
      width: 100%;
      height: auto; /* 配合Video.js的fluid属性实现自适应 */
    }
  </style>
</head>
<body>

<!-- 触发Modal的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal">
  打开视频弹窗
</button>

<!-- Bootstrap Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="videoModalLabel">视频播放</h4>
      </div>
      <div class="modal-body">
        <!-- Video.js视频容器，注意不要提前写data-setup=""，我们手动初始化 -->
        <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" poster="你的视频封面地址.jpg">
          <source src="你的视频地址.mp4" type='video/mp4'>
          <p class="vjs-no-js">请启用JavaScript以观看视频</p>
        </video>
      </div>
    </div>
  </div>
</div>

<!-- 引入依赖JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
<script>
  // 全局保存Video.js实例，避免重复初始化
  let videoPlayer;

  // 监听Modal完全显示的事件
  $('#videoModal').on('shown.bs.modal', function () {
    if (!videoPlayer) {
      // 第一次打开Modal时，初始化Video.js
      videoPlayer = videojs('my-video', {
        responsive: true,
        fluid: true, // 启用流体布局，自动适配容器宽高
        controls: true
      });
    } else {
      // 非第一次打开，强制刷新尺寸，修复控件布局
      videoPlayer.handleResize();
    }
    // 可选：打开Modal后自动播放视频
    videoPlayer.play();
  });

  // 监听Modal关闭的事件
  $('#videoModal').on('hidden.bs.modal', function () {
    if (videoPlayer) {
      // 暂停视频
      videoPlayer.pause();
      // 重置视频到开头，避免下次打开时从上次暂停位置开始
      videoPlayer.currentTime(0);
      // 可选：如果需要彻底销毁实例（比如Modal只需要打开一次），可以用videoPlayer.dispose()
    }
  });
</script>
</body>
</html>

二、为什么要这么做？ #

1. 手动初始化代替data-setup：如果用data-setup=""，Video.js会在页面加载时就初始化，但此时Modal是隐藏的，容器尺寸为0，导致控件渲染错乱。
2. shown.bs.modal事件触发后处理：只有当Modal完全显示，容器尺寸确定后，Video.js才能正确计算控件的位置和大小。
3. 关闭Modal时清理视频状态：如果不暂停视频，视频会在后台继续播放，再次打开Modal时可能出现控件无响应、画面卡顿的问题；重置到开头则能保证每次打开都是全新的播放状态。

三、额外注意事项 #

• 确保引入的Bootstrap、jQuery、Video.js版本兼容，上面示例用的版本都是经过测试可以正常配合的。
• 如果你的Modal是动态生成的（比如通过JS创建），记得在Modal添加到DOM后再绑定事件。
• 如果视频还是有布局问题，可以检查Modal的modal-dialog尺寸，调整为合适的宽度（比如添加modal-lg类让Modal更宽）。

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