5

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

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

4 回答 4

5

没有删除添加的文本轨道的机制（可能是当前规范中的一个缺陷（？）。还有一个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，但我还没有尝试过这个..）

于 2015-03-27T21:10:52.290 回答
2

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
于 2019-09-11T02:16:00.557 回答
0 
     //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);
        }
于 2021-08-27T11:13:45.113 回答
-1

这可以使用 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]);
}
于 2019-12-20T03:36:27.010 回答