如何在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';
  });