从视频中删除TextTrack

Delete a TextTrack from a video

本文关键字：TextTrack 删除 视频      更新时间：2023-09-26

有没有一种好的方法可以删除通过JavaScript添加到HTML5 <video>标记中的单个TextTrack？以下代码是如何添加音轨的简单演示，但我还没有找到删除音轨的好方法：

document.querySelector('video#myVideo').addTextTrack(...);

没有机制可以删除当前规范中添加的文本轨道（可能是缺陷（？））。还有一个onremovetrack事件，但是…）。

我们唯一能做的就是禁用或隐藏它。请确保您保留对轨道的引用：

var video = document.querySelector('video#myVideo');
var track = video.addTextTrack("...");
...
track.mode = "showing";  // when cues are added and is ready

然后当你不再需要它时：

track.mode = "disabled"; // or "hidden"

（你也可以绕过重置src，但我还没有尝试过。）

TextTrackList的实现

如果您没有阅读，请先参考此URL。https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList

它说

addtrack

当向媒体元素中添加了新的文本音轨时激发。

删除跟踪

从媒体元素中删除新的文本音轨时激发。

从上面可以看出，addtrack和removetrack事件依赖于HTMLMediaElement。

删除带有DOM元素的音轨.removeChild（）

<!-- HTML -->
<video src="foo.ogv">
    <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default>
    </track>
    <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de">
    </track>
</video>

videoElement.text跟踪控制台输出

var videoElement = document.querySelector("video");
console.log(videoElement.textTracks);

//output
TextTrackList {0: TextTrack, 1: TextTrack, length: 2, onchange: null, onaddtrack: null, onremovetrack: null}
0: TextTrack {kind: "subtitles", label: "English subtitles", language: "en", id: "", mode: "showing", …}
1: TextTrack {kind: "subtitles", label: "Deutsche Untertitel", language: "de", id: "", mode: "disabled", …}
length: 2

videoElement.textTracks.onremovetrack = function(event){
    console.log('DOM removed',event)
    console.log(videoElement.textTracks)
}
var tracks = videoElement.querySelectorAll('track')
videoElement.removeChild(tracks[0])
//output
DOM removed TrackEvent {isTrusted: true, track: TextTrack, type: "removetrack", target: TextTrackList, currentTarget: TextTrackList, …}
TextTrackList {0: TextTrack, 1: TextTrack, length: 1,...}
0: TextTrack {kind: "subtitles", label: "Deutsche Untertitel", language: "de", id: "", mode: "disabled", …}

禁用跟踪

videoElement.textTracks[0].mode = "disabled"; // Disable English
videoElement.textTracks[1].mode = "showing";  // Enable Deutsche

addTextTrack&removeTextTrack

addTextTrack方法不会将track element创建为HTMLMediaElement，因此如果需要使用DOM元素删除音轨，则需要手动创建并附加track element。

目前没有removeTextTrack方法。如果您需要removeTextTrack，请访问上面评论中提到的@Endless。https://github.com/whatwg/html/issues/1921

//best way to do this thing
//disable The Old Subtitles From The Dom
var tracks = document.querySelector("video").textTracks;
var numTracks = tracks.length;
for (var i = numTracks - 1; i >= 0; i--)
  document.querySelector("video").textTracks[i].mode = "disabled";
<video>
    <track>
    <track>
</video>

这可以使用javascript和VideoJS库（经过测试并可与1个或多个音轨一起使用）来完成：

使用某种选择器在DOM中获取媒体播放器对象，然后获取它的所有轨迹，然后通过按相反顺序迭代数组逐个移除它们。

var player = videojs(document.getElementById(playerId));
var tracks = player.remoteTextTracks();
var numTracks = tracks.length;
for(var i = numTracks - 1; i >=0 ; i--) {
    player.removeRemoteTextTrack(tracks[i]);
}

更加详细，但您可以使用DOM API。大部分工作是从video.textTracks中查找DOM TrackElement和TextTrack之间的对应关系。

奇怪的是，添加了video.addTextTrack的音轨没有添加到DOM中。

添加曲目

const textTracksBefore = Array.from(videoElement.textTracks);
const trackElement = document.createElement('track');
trackElement.kind = 'subtitles';
trackElement.label = PlayerShakaTextDisplayer.TextTrackLabel_;
trackElement.srclang = language;
videoElement.appendChild(trackElement);
this.trackElement_ = trackElement;
const textTracksAfter = Array.from(videoElement.textTracks);
const newTracks = textTracksAfter.filter(x => !textTracksBefore.includes(x));
this.textTrack_ = newTracks[0];

删除轨迹

this.videoElement.removeChild(this.trackElement_);
this.trackElement_ = null;
this.textTrack_ = null;
相关文章：