设置字幕文件后Plyr视频播放器字幕未生效问题咨询

问题原因 #

1. 直接向video原生DOM插入track标签不会触发Plyr内部状态更新，Plyr自身维护了字幕配置缓存，不会主动监听DOM的track节点变更，因此控制栏UI不会同步激活状态。
2. 直接修改player.captions.active = true仅修改了属性值，没有触发Plyr的字幕激活事件，无法同步更新控制栏UI。

最优实现方案 #

方案1：通过官方source配置传入字幕（推荐）

不需要手动操作DOM，所有配置交由Plyr内部处理，状态同步最稳定。在设置视频源时直接传入字幕配置即可：

player.source = {
  type: 'video',
  title: mvFileName,
  sources: [
    {
      src: mvUrl,
      type: mvfileContentType,
      size: 720,
    }
  ],
  poster: posterPath,
  // 新增字幕配置项
  tracks: [
    {
      kind: 'captions',
      label: $('#hdnMVSubttleLangName').val(),
      srclang: $('#hdnMVSubttleShortLang').val(),
      src: jsonResponse.SubtitleUrl,
      default: true // 配置默认激活字幕
    }
  ]
};

方案2：视频加载完成后动态追加字幕

如果视频已经加载完毕，不需要重新设置整个视频源，可在手动插入track后调用官方API同步状态：

const track = document.createElement('track');
Object.assign(track, {
  kind: "captions",
  label: $('#hdnMVSubttleLangName').val(),
  srclang: $('#hdnMVSubttleShortLang').val(),
  src: jsonResponse.SubtitleUrl,
  default: true
});
player.media.appendChild(track);

// 新增两行代码同步状态与UI
player.captions.update(); // 让Plyr重新读取当前字幕列表
player.toggleCaptions(true); // 调用官方API激活字幕，无需直接修改active属性

注意事项 #

• 确保vtt字幕文件格式规范，首行必须是WEBVTT，无多余前缀内容
• 字幕文件的服务器需配置正确的MIME类型，且支持跨域访问，和视频资源的跨域规则保持一致

内容的提问来源于stack exchange，提问作者V.Prasad