javascript - 如何在 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
}

祝你好运。