如何在Safari中隐藏视频文本轨道？Firefox/Chrome方法失效

嘿，我之前也踩过Safari字幕隐藏的坑，给你几个亲测有效的解决方案，顺便说下你可能忽略的点：

一、修正JS逻辑，适配Safari的文本轨道处理 #

Safari对textTracks的mode属性支持有特殊要求，直接设置可能因为轨道未完全加载而失效，而且它需要同时操作<track>DOM元素的hidden属性才能生效：

let videoElement = document.querySelector(`#my-video`);

// 等待视频元数据加载完成后再操作（关键！）
videoElement.addEventListener('loadedmetadata', () => {
  // 先获取对应的<track> DOM元素
  let trackElement = videoElement.querySelector('track');
  if (trackElement) {
    // 先设置DOM元素的hidden属性
    trackElement.hidden = true;
    // 同步更新textTracks的mode
    let track = videoElement.textTracks[0];
    if (track) {
      track.mode = 'hidden';
    }
  }
});

你之前可能没等视频元数据加载完成就执行代码，导致Safari还没初始化好文本轨道，所以设置不生效。

二、用WebKit私有CSS选择器彻底隐藏字幕容器 #

你用::cue只能隐藏文字但留背景，是因为::cue只作用于字幕文本，而Safari的字幕是放在一个带背景的容器里的。试试这个CSS：

/* 隐藏WebKit内核（Safari）的整个字幕容器 */
video::-webkit-media-text-track-container {
  display: none !important;
}

/* 兼容其他浏览器的文字隐藏 */
::cue {
  visibility: hidden;
}

::-webkit-media-text-track-container是Safari等WebKit浏览器的私有选择器，能直接把整个字幕容器（包括背景）都隐藏掉。

三、备选方案：临时清空轨道源（不推荐但应急可用） #

如果上面的方法都不行，你可以暂时清空轨道的src（但保留轨道元素），需要恢复的时候再把源地址加回去：

let videoElement = document.querySelector(`#my-video`);
let trackElement = videoElement.querySelector('track');
// 先保存原始的轨道源地址
const originalTrackSrc = trackElement.src;

// 隐藏轨道
trackElement.src = '';
trackElement.hidden = true;

// 后续需要恢复字幕渲染时
// trackElement.src = originalTrackSrc;
// trackElement.hidden = false;

你可能遗漏的要点 #

• 时机问题：Safari必须等视频loadedmetadata事件触发后，才能正确访问和操作文本轨道，提前执行代码会无效；
• WebKit私有特性：Safari的字幕渲染依赖WebKit的私有DOM和CSS特性，只用标准的textTracks.mode或::cue可能覆盖不到；
• DOM元素与textTracks对象同步：Safari需要同时设置<track>DOM元素的hidden属性和textTracks对象的mode，只操作其中一个可能不生效。

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