VideoJS v5.x升级至v6.x时TextTrack对象是否发生变更？

报错原因 #

• VideoJS 6.x 开始重构了文本轨道的处理逻辑，默认会接管原生<track>标签的渲染和管理，原来通过document.getElementById()直接获取轨道DOM节点的方式不再生效，会拿到null值，因此调用.track属性时抛出Uncaught TypeError: Cannot read properties of null (reading 'track')错误。

修复方案 #

推荐优先使用VideoJS官方提供的API获取字幕轨道，适配性更强，也兼容后续升级到7.x版本的需求，示例代码如下：

// 替换为你实际初始化的VideoJS播放器实例变量
const player = videojs('你的播放器ID');
// 获取播放器挂载的所有文本轨道
const textTrackList = player.textTracks();
let targetCaptionTrack = null;
// 遍历筛选你需要的目标字幕轨道，可以通过kind、label、id等属性匹配
for (let i = 0; i < textTrackList.length; i++) {
  const track = textTrackList[i];
  // 示例：匹配字幕类型的轨道，可根据你的实际需求调整匹配规则
  if (track.kind === 'captions') {
    targetCaptionTrack = track;
    break;
  }
}
// 后续直接使用targetCaptionTrack操作即可，无需再从DOM节点获取track属性

如果确实需要保留原来直接操作DOM的逻辑，可以在初始化播放器时开启原生文本轨道配置：

const player = videojs('你的播放器ID', {
  html5: {
    nativeTextTracks: true
  }
});

开启后VideoJS不会接管原生文本轨道的处理，原来的DOM访问代码可正常运行。

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