有没有一种好方法可以删除通过 JavaScript 添加到 HTML5 <video> 标记的单个 TextTrack？下面的代码是一个如何添加轨道的简单演示，但是我还没有找到一个好的删除方法：
document.querySelector('video#myVideo').addTextTrack(...);
【问题讨论】：
标签： javascript html html5-video media-source mpeg-dash
没有机制可以删除添加的文本轨道（可能是当前规范中的一个缺陷 (?)。还有一个 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，但我还没有尝试过这个..）
【讨论】：
onremovetrack 事件的唯一方法是从视频标签中删除<track> 节点，这对于“非DOM”轨道当然是不可能的。
<track> 节点添加常规轨道，并且通过删除它，textTracks 属性中的相关元素也会立即删除。
TextTrackList 的实现
如果您没有阅读，请先参考此网址。 https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList
它提到了
onremovetrack 发送 removetrack 事件时调用的事件处理程序，指示文本轨道已从媒体元素中删除。
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.textTracks 控制台输出
var videoElement = document.querySelector("video");
console.log(videoElement);
//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
上面引用的意思是当 Video DOM 元素被移除时会触发 onremovetrack。请参阅此示例。
videoElement.textTracks.onremovetrack = function(event){
console.log('DOM removed',event)
}
videoElement.removeChild(videoElement.children[0])
//output
DOM removed TrackEvent {isTrusted: true, track: TextTrack, type: "removetrack", target: TextTrackList, currentTarget: TextTrackList, …}
删除曲目
var videoElement = document.querySelector("video");
videoElement.removeChild(videoElement.children[0]); //remove English subtitle
// you need iterlate videoElement.textTracks and find index according to language
var i =0;
var targetLanguage = "de";
for (let track of videoElement.textTracks){
if(track.language !== targetLanguage){
videoElement.removeChild(videoElement.children[i]);
}
i++;
}
禁用跟踪
videoElement.textTracks[0].mode = "disabled"; // Disable English
videoElement.textTracks[1].mode = "showing"; // Enable Deutsche
【讨论】：
//best way to do this thing
//remove The Old Subtitles From The Dom
try{
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"; // Disable English
}
}catch(e){
console.log(e);
}
【讨论】：
这可以使用 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]);
}
【讨论】：