YouTube播放器onApiChange后字幕大小设置未同步及刷新失效问题

问题1：API设置字幕大小后，播放器UI下拉菜单未同步选中 #

YouTube IFrame Player API的setOption方法仅会修改字幕的实际渲染样式，不会同步更新播放器原生设置面板里的下拉选中状态——这是API的设计限制，官方没有提供直接同步UI控件状态的接口。

如果要让UI和设置状态保持一致，有两种处理方式：

• 接受原生UI的状态差异（大部分场景下用户不会在意，只要字幕显示正确即可）
• 自定义字幕设置控件（比如自己做一个下拉菜单），完全替代原生的设置选项，这样就能自己控制UI选中状态和字幕样式的同步。

问题2：页面刷新后字幕大小设置丢失 #

默认情况下，API的设置只在当前会话有效，刷新页面后会重置为播放器默认值。要保留设置，需要把字幕大小值持久化存储，比如用localStorage：

修改后的代码示例 #

<!DOCTYPE html>
<html>
  <body>
    <div id="player"></div>

    <script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          playerVars: {
            cc_load_policy : 1
          },
          events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
          },
        });
      }
      
      function onPlayerReady(event) {
        event.target.setVolume(20);
        // 从localStorage读取保存的字幕大小，没有则用默认值2
        const savedFontSize = localStorage.getItem('youtube-caption-font-size') || 2;
        event.target.setOption('captions', 'fontSize', parseInt(savedFontSize));
        event.target.playVideo();
      }

      var done = false;
      function onPlayerStateChange(event) {       
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }       
      }
      
      // 如果需要自定义控件，可以用这个函数，修改字幕大小并保存到localStorage
      function setCaptionFontSize(size) {
        if (player) {
          player.setOption('captions', 'fontSize', size);
          localStorage.setItem('youtube-caption-font-size', size);
          // 这里可以同步更新自定义控件的选中状态
        }
      }
      
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

额外说明 #

• 移除了原代码里的onApiChange事件绑定，因为这个事件主要用于检测API功能的可用性变化（比如字幕是否加载完成），把设置逻辑放在onPlayerReady里更合理。
• 如果使用自定义控件，点击选项时调用setCaptionFontSize函数，既能设置字幕大小，又能保存到本地，同时可以自己控制UI的选中状态，完美解决原生UI不同步的问题。

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