网页端AirPlay投屏时，如何通过自定义控件修改视频字幕？

问题场景 #

使用原生<video>元素构建的播放器支持AirPlay，本地播放时通过自定义控件修改字幕（开启/关闭/切换语言）正常，使用Apple TV遥控器也能正常修改AirPlay投屏的字幕状态。但启动AirPlay投屏后，通过网页自定义控件执行如下代码修改textTrack.mode时，本地日志显示设置成功，但AirPlay投屏画面的字幕无变化：

const textTrack = videoElement.textTracks[0]
textTrack.mode = 'hidden' // 预期隐藏字幕，但AirPlay端无响应

原因解析 #

当AirPlay会话激活后，视频的播放与渲染控制权会转移到AirPlay接收设备（如Apple TV），此时网页端对<video>元素textTracks的本地DOM操作不会自动同步到远程设备。这是因为AirPlay的媒体传输机制中，字幕轨道的渲染逻辑由接收端主导，网页端的本地状态修改无法直接传递到远程播放会话中。

可行的解决方向 #

• Safari环境下利用WebKit专属API：
  只有Safari浏览器支持原生AirPlay的Web控制API，你可以通过RemotePlayback接口监听投屏状态变化：

  1. 监听remoteplaybackstatechange事件，判断当前是否处于远程播放状态
  2. 若处于投屏状态，尝试通过videoElement.remote对象的相关方法同步字幕设置，或直接更新媒体源的字幕轨道元数据，确保AirPlay设备能获取到最新的字幕状态

• 提前设置字幕状态：
  在启动AirPlay投屏之前，先在网页端配置好目标字幕状态，投屏会话启动时会同步初始的字幕设置。这种方式适合不需要投屏过程中动态修改字幕的场景

• 确保字幕格式与传输兼容性：
  确认字幕是内嵌在媒体文件中，或通过<track>标签正确加载的标准格式（如WebVTT、SRT）。如果是外挂字幕，需确保投屏时字幕数据能与媒体流一起发送到AirPlay设备，仅修改本地textTrack.mode无法让远程设备感知到字幕状态变化

注意：目前Web标准中针对AirPlay的字幕控制API尚未统一，仅Safari有完整实现，实际开发中需结合WebKit官方文档做适配

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