Video.js播放HLS流中途分辨率变更问题及固定方案咨询

以下是针对你问题的几个实用方案，按推荐优先级排序：

1. 配置Video.js的fitMode参数（官方推荐） #

Video.js内置了fitMode选项，可强制视频内容填充设定的播放器容器，不受源视频分辨率变化影响。在React环境中初始化播放器时添加该配置：

// React组件中的播放器初始化代码片段
const player = videojs(videoElement, {
  fluid: false,
  width: 1366,
  height: 520,
  fitMode: 'fill', // 核心配置：强制拉伸填充容器
  sources: [{
    src: '你的AWS HLS流地址',
    type: 'application/x-mpegURL'
  }]
});

fitMode: 'fill'会让视频忽略自身宽高比，完全填充你设定的1366x520容器，彻底解决分辨率切换时的画面跳变问题。

2. 用CSS强制固定播放器尺寸（兜底方案） #

如果上述配置不生效，可通过CSS直接锁定播放器容器和视频元素的尺寸：

/* 全局CSS或组件内联样式 */
.video-js {
  width: 1366px !important;
  height: 520px !important;
}

.video-js .vjs-tech {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill; /* 强制拉伸填充容器 */
}

object-fit: fill会让视频内容完全覆盖容器，不管源视频的宽高比。

3. 可选：统一AWS转码的宽高比（优化体验） #

如果希望拉伸时画面不严重变形，可检查AWS MediaConvert（或你用的转码服务）的配置，确保所有HLS码流的宽高比一致（比如都设置为16:9）。这样即使拉伸，画面比例也不会失调，提升用户体验。

4. 备选：禁用自动码率切换（仅当上述方法失效时） #

如果不需要自适应码率功能，可强制播放器固定使用某一码率，彻底避免分辨率切换：

// 在播放器初始化后添加
player.hls().qualitySelector({
  default: '最高码率的编号', // 可通过player.hls().levels()查看所有码流信息
  forced: true // 强制锁定选中的码率
});

注意：此方法会失去自适应码率的优势，仅建议作为最后手段。

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