如何通过字符串变量为VideoJS动态加载字幕无需请求WebVTT文件

完全可行。不需要请求独立的WebVTT文件，也不需要引入额外的第三方解析插件，利用浏览器原生的Blob能力即可实现内存字幕的加载，全程无额外网络请求，且不会出现跨域问题，兼容VideoJS 6.x及以上所有主流版本。

核心思路是把内存中存储的WebVTT字符串转换为浏览器可直接识别的同源临时Blob地址，将这个地址作为字幕源传入VideoJS的字幕轨道配置即可，播放器会把它和普通网络地址的VTT文件同等处理，所有数据直接从内存读取，不会发起网络请求。

• 预处理字幕字符串，将内容中被HTML转义的特殊字符还原，比如把-->替换为WebVTT标准要求的-->，保证字幕格式符合规范。
• 将处理完成的标准WebVTT字符串封装为MIME类型为text/vtt的Blob对象，调用URL.createObjectURL()生成仅在当前页面生效的内存临时URL。
• 在VideoJS播放器初始化完成后，调用addRemoteTextTrack()方法添加字幕轨道，将生成的Blob URL作为字幕源地址传入，配置好字幕语言、显示名称、默认显示状态等参数。
• 绑定播放器销毁事件，在播放器卸载时调用URL.revokeObjectURL()释放临时URL占用的内存，避免内存泄漏。

// 已定义的字幕内容变量，已将转义的>替换为WebVTT标准要求的>
const subtitle = `WEBVTT

00:01.000 --> 00:04.000
- Never drink liquid nitrogen.

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.`;

// 生成VTT格式Blob和临时内存访问地址
const vttBlob = new Blob([subtitle], { type: 'text/vtt' });
const vttSrc = URL.createObjectURL(vttBlob);

// 获取VideoJS播放器实例，将参数替换为你页面上实际的视频元素ID
const player = videojs('your-video-element-id');

player.ready(() => {
  // 向播放器添加字幕轨道
  player.addRemoteTextTrack({
    kind: 'subtitles',
    srclang: 'en', // 字幕语言代码，中文字幕填zh即可
    label: '英文字幕', // 播放器字幕选择菜单中显示的名称
    src: vttSrc,
    default: true // 配置为默认开启的字幕
  }, false);
});

// 播放器销毁时释放临时地址占用的内存
player.on('dispose', () => {
  URL.revokeObjectURL(vttSrc);
});

• Blob的MIME类型必须设置为text/vtt，如果错填为text/plain会导致部分浏览器的WebVTT解析器无法正常识别字幕内容。
• addRemoteTextTrack的第二个参数要传false，避免VideoJS内部自动重复触发字幕加载逻辑。
• 生成的Blob URL仅在当前页面的当前生命周期内有效，页面刷新或关闭后会自动失效，不会在本地残留垃圾文件。

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