如何获取YouTube视频字幕并独立展示？双语英语学习APP技术咨询

1. 利用YouTube IFrame Player API（官方推荐） #

这是最稳定合规的实现方式，直接通过官方API对接字幕数据并同步展示：

• 初始化播放器时配置字幕参数：嵌入IFrame时添加cc_load_policy=1（强制开启字幕）、hl=en（设置默认语言）等参数，确保字幕轨道正常加载。
• 获取字幕轨道列表：通过API的player.getOption("captions", "tracklist")方法，获取当前视频可用的所有字幕轨道，筛选出你需要的双语语言轨道（比如英文和中文）。
• 获取并解析字幕内容：对选中的轨道，通过player.getOption("captions", "trackinfo")获取字幕的VTT格式资源链接，异步下载后解析成「时间戳-文本」的映射数组。
• 同步展示：监听播放器的onTimeUpdate事件，实时获取当前播放时间，匹配映射数组中的对应字幕，在独立区域展示。

示例代码片段：

// 初始化YouTube播放器
const player = new YT.Player('player-container', {
  videoId: 'TARGET_VIDEO_ID',
  playerVars: {
    cc_load_policy: 1,
    hl: 'en'
  },
  events: {
    'onReady': handlePlayerReady
  }
});

function handlePlayerReady(event) {
  // 获取所有可用字幕轨道
  const trackList = event.target.getOption("captions", "tracklist");
  // 筛选英文轨道
  const enTrack = trackList.find(track => track.languageCode === 'en');
  if (enTrack) {
    // 下载并解析VTT字幕
    fetch(enTrack.baseUrl)
      .then(res => res.text())
      .then(vttContent => {
        const captions = parseVttToTimeline(vttContent);
        // 监听播放时间更新，同步展示字幕
        event.target.addEventListener('onTimeUpdate', () => {
          const currentTime = event.target.getCurrentTime();
          const activeCaption = captions.find(cap => currentTime >= cap.start && currentTime <= cap.end);
          if (activeCaption) {
            document.getElementById('subtitle-display').textContent = activeCaption.text;
          }
        });
      });
  }
}

// 简单的VTT格式解析函数
function parseVttToTimeline(vttText) {
  const lines = vttText.split('\n').filter(line => line.trim() !== '');
  const timeline = [];
  let index = 0;
  while (index < lines.length) {
    if (lines[index].includes('-->')) {
      const [startStr, endStr] = lines[index].split('-->').map(str => str.trim());
      const start = convertTimeToSeconds(startStr);
      const end = convertTimeToSeconds(endStr);
      const text = lines[index + 1];
      timeline.push({ start, end, text });
      index += 2;
    } else {
      index++;
    }
  }
  return timeline;
}

// 将VTT时间格式转为秒数
function convertTimeToSeconds(timeStr) {
  const [hours, minutes, seconds] = timeStr.split(':').map(Number);
  return hours * 3600 + minutes * 60 + seconds;
}

2. 利用YouTube Data API获取字幕资源 #

如果需要脱离播放器提前获取字幕，可使用Data API的captions.list接口：

• 申请API密钥：在Google Cloud控制台创建项目并启用YouTube Data API，获取合法的API密钥。
• 按需请求字幕：当用户打开某视频时，调用captions.list接口，传入视频ID、目标语言参数，获取字幕的下载链接（支持VTT/SRT格式）。
• 解析并同步展示：下载字幕文件后解析成时间轴数据，结合视频播放进度同步展示。
• 配额优化：YouTube Data API有每日请求配额限制，可缓存近期热门视频的字幕减少请求量，但无需批量存储所有视频字幕，按需获取即可避免数据库过载。

3. 非官方页面解析方式（谨慎使用） #

通过分析YouTube页面的网络请求或源码提取字幕链接：

• 视频加载时，浏览器会发起字幕资源请求，可通过开发者工具的网络面板找到对应VTT请求的URL。
• 直接请求该URL获取字幕内容并解析。
• 风险提示：该方式违反YouTube服务条款，且页面结构或请求规则随时可能变化，稳定性无法保障，仅作为应急备选方案。

关键注意事项 #

• 合规性：所有获取字幕的操作必须遵守YouTube服务条款，禁止未经授权缓存、分发字幕内容。
• 双语对齐：若要展示双语字幕，需分别获取两种语言的字幕轨道，解析后根据时间戳对齐，确保同一时间点的字幕同步展示。
• 性能优化：采用「按需获取」策略，仅在用户访问视频时才获取对应字幕，无需提前批量存储，大幅降低数据库压力。

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