CAF v3自定义接收器更新Shaka Player后仍存字幕定位问题

我之前开发自定义CAF v3接收器时，也碰到过和《CAF接收器：字幕定位》里一模一样的问题——字幕总是固定显示在屏幕左上角。当时查到Google已经在shaka-player v2.2.10版本修复了相关的字幕定位bug，但哪怕我们把CAF依赖的shaka-player.js更新到这个版本，问题还是没解决。

先给大家看看我们当时用的TTML示例：

<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
      <style id="baseStyle" tts:textAlign="center" tts:fontSize="12%" tts:color="#FFFFFF"/>
    </styling>
    <layout>
      <region id="subtitleRegion" tts:displayAlign="after" tts:extent="90% 15%" tts:origin="5% 80%"/>
    </layout>
  </head>
  <body region="subtitleRegion">
    <div>
      <p begin="00:00:01.000" end="00:00:03.500">First subtitle line</p>
      <p begin="00:00:04.000" end="00:00:06.000">Second subtitle line</p>
    </div>
  </body>
</tt>

后来我们排查出几个可能的原因，也对应找到了解决办法，分享给大家：

• 检查TTML的布局定义是否规范：很多时候问题出在TTML本身，比如没有正确关联region，或者region的origin、displayAlign属性配置有误。要确保<body>标签明确指定了region属性，并且region的定位参数符合需求。
• 强制覆盖字幕容器的CSS样式：如果TTML的配置没问题但还是不生效，可以在自定义接收器的代码里添加CSS，强制调整字幕容器的位置。比如：

.shaka-text-container {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 6% !important;
  width: 90% !important;
}

• 确认shaka-player的实际运行版本：有时候虽然引用了v2.2.10，但浏览器缓存或者依赖加载顺序问题会导致实际运行的是旧版本。可以在控制台执行shaka.Player.version来验证当前版本是否正确，必要时清理缓存重新加载。
• 排查自定义接收器的字幕逻辑：如果你的接收器有自定义的字幕渲染逻辑，可能会覆盖shaka-player的默认行为。检查代码里有没有修改字幕容器位置、样式的地方，确保这些逻辑没有和修复后的播放器逻辑冲突。

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