為 HTML5 視頻添加字幕

Question

我用 JavaScript 構建了一個自定義的 HTML5 視頻播放器，我使用以下 js 代碼隱藏了本機控件：

var video = document.getElementById("video");
video.controls = false;

然后我自定義了控件（播放 - 暫停 - 全屏...）一切正常。 我的問題是當我實現如下所示的標簽時：

<track label="English" kind="subtitles" src="sub/vid_sub.vtt" srclang="en">

副標題沒有出現，所以我發現隱藏控件的js代碼也隱藏了標簽，我試圖找到一種方法禁用除標簽之外的所有本機控件，但我不能。 如果有什么辦法可以解決這個問題，請告訴我。

Answer 1

如果您將默認值添加到 html 軌道，它將默認顯示如果您想操作多個字幕，您可以查詢選擇所有字幕，然后顯示一個用戶點擊如下。

for (var i = 0; i < video.textTracks.length; i++) {
    if (video.textTracks[i].language == 'en') {
        video.textTracks[i].mode = 'showing';
 }

如果你想隱藏它，如下所示。

track.mode="hidden";