如何在 Safari 中隐藏视频字幕？

Question

我为我的视频设置了字幕。据我所知，

textTracks

是 Chrome 和 FireFox 的正确选择。我在 Safari 中找不到类似的东西。他们是否希望我添加和删除标签以隐藏和显示标题？

我在其他浏览器中工作的代码很简单：

function setMode() {
  videoTag.textTracks[0].mode = isOn ? 'showing' : 'hidden';
}

加载页面时，我看到了这个

textTracks

：

后来由于某种原因显示了两个

textTracks

，其中第二个是空的。

我最近尝试的完整代码是：

let isOn = false;
const videoTag = doc.getElementsByTagName('video')[0];
const trackTag = doc.createElement('track');
const id = win.ccv$serverData.ccvid;

function setMode() {
  console.log([...videoTag.textTracks]);
  const tracks = [...videoTag.textTracks].filter(t => t.kind === 'captions');
  tracks.forEach(track => {
    console.log('updating', track);
    track.mode = isOn ? 'showing' : 'hidden';
    console.log(track.mode);
  });
}

trackTag.setAttribute('default', '');
trackTag.setAttribute('src', `/api/video/${id}/captions`);
trackTag.setAttribute('kind', `captions`);

videoTag.appendChild(trackTag);

setMode();

Answer 1

您可以尝试删除

<track>

元素：

[...document.querySelectorAll("track")].forEach((track) => track.remove());

另一种方法是使用 CSS：

track {
  display: none !important
}

祝你好运。

Answer 2

所以你可以注意到我的代码正在做

[0]

我倾向于避免。但我手动附加了一个

track

。显然 Safari 正在为

track

添加另一个

captions

- 即使我的标签说它的

kind

是

captions

。

所以在只有一个标签的情况下，仍然有两个曲目列表。

如果有人可以解释为什么 Safari 可能会这样做，我会更改他们的答案。或者这可能是一个错误？

我在

https://developer.apple.com/documentation/webkitjs/texttracklist/1632931-onaddtrack

中找到了方法onaddtrack。

这使我的解决方案变成：

videoTag.textTracks.onaddtrack = setMode;

我显然还必须删除

videoTag.textTracks[0].mode = isOn ? 'showing' : 'hidden';

位以支持

  const tracks = [...videoTag.textTracks].filter(t => t.kind === 'captions');
  tracks.forEach(track => {
    track.mode = isOn ? 'showing' : 'hidden';
  });

Answer 3

只需在 video.addEventListener("loadeddata", (event) => {} event 上将模式设置为“隐藏”