如何仅在特定语言字幕可用时显示嵌入YouTube视频字幕？

嘿，这个需求单纯靠iframe参数是没法精准实现的——毕竟cc_load_policy=1会强制显示字幕，但如果目标语言没有可用字幕的话，YouTube要么自动 fallback 到其他字幕，要么显示自动生成的，没法做到「没有就完全不显示」的效果。得借助YouTube的JavaScript API来实现，我给你梳理下具体步骤：

1. 调整iframe标签 #

首先修改你的iframe，移除cc_lang_pref和cc_load_policy参数（我们会用JS动态控制），并给iframe添加一个ID方便JS调用：

<iframe id="youtube-player" 
        src="embeddedVideoUrl?enablejsapi=1&modestbranding=1&autoplay=0&controls=0&showinfo=0&nologo=1&rel=0&loop=1&hl=es&playsinline=1" 
        frameborder="0"
        allow="autoplay; encrypted-media">
</iframe>

注意：enablejsapi=1必须保留，这是启用JS API的关键参数。

2. 加载YouTube Player API脚本 #

在页面的<head>标签里添加API脚本，确保能初始化播放器：

<script src="https://www.youtube.com/iframe_api"></script>

3. 编写控制逻辑JS代码 #

通过API监听播放器就绪事件，检测目标语言字幕是否存在，再决定是否显示字幕：

document.addEventListener('DOMContentLoaded', function() {
  // 初始化YouTube播放器实例
  const player = new YT.Player('youtube-player', {
    events: {
      'onReady': handlePlayerReady
    }
  });

  function handlePlayerReady(event) {
    const targetLanguage = 'en'; // 替换成你需要检测的目标语言代码
    // 获取所有可用的字幕轨道
    const captionTracks = event.target.getOption('captions', 'tracks');

    // 检查是否存在目标语言的字幕轨道
    const hasTargetCaption = captionTracks.some(track => {
      // 注意：languageCode是标准的ISO语言代码，比如'en'、'es'
      return track.languageCode === targetLanguage;
    });

    if (hasTargetCaption) {
      // 存在目标字幕：设置语言偏好并显示字幕
      event.target.setOption('captions', 'language', targetLanguage);
      event.target.setOption('captions', 'track', 'show');
    } else {
      // 不存在目标字幕：隐藏所有字幕
      event.target.setOption('captions', 'track', 'hide');
    }
  }
});

关键说明 #

• 语言代码匹配：确保targetLanguage的值和YouTube字幕的语言代码一致（比如英语是en，西班牙语是es），可以在YouTube视频的字幕设置里查看对应代码。
• 排除自动生成字幕：如果视频有自动生成的目标语言字幕，captionTracks里也会包含这条轨道，如果你想排除自动生成的，可以在some判断里加上!track.isAutoGenerated。
• API兼容性：以上方法基于YouTube Player API的getOption和setOption方法，确保你的API脚本是最新版本。

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