如何无需创建.vtt文件为视频添加全程展示的动态字幕？

开发者阿泽

2026-9-23

无需创建.vtt文件动态添加视频字幕实现方案

问题1：你的需求是否可以实现？

完全可以实现，不需要生成外部.vtt文件，直接通过JavaScript API动态创建字幕轨道和字幕内容即可实现需求。

问题2：如何通过代码直接添加字幕？

你原有代码不显示字幕主要存在两个问题：

回调内this指向错误：addEventListener普通回调中的this并不指向video元素，无法正确调用addTextTrack方法
字幕轨道默认隐藏：创建的TextTrack默认mode为hidden，必须手动设置为showing才会将字幕渲染到视频上

修正后的代码示例如下：

// 替换为你的实际video元素
const video = document.getElementById('video-player');
const displayUsername = "通话者用户名";

video.srcObject = stream;
video.addEventListener("loadedmetadata", async () => {
  // 等待视频播放就绪
  await video.play();
  // 创建字幕轨道
  const captionTrack = video.addTextTrack("captions", "用户昵称展示", "zh");
  // 开启字幕显示
  captionTrack.mode = "showing";
  // 添加字幕内容
  captionTrack.addCue(new VTTCue(0, 3600, displayUsername));
});