从视频中删除 TextTrack

Question

是否有删除通过 JavaScript 添加到 HTML5 <video> 标签的单个 TextTrack 的好方法？下面的代码是一个简单的添加轨道的demo，但是我还没有找到好的删除轨道的方法：

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

Answer 1

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

Answer 2

TextTrackList的实现

没看过的请先参考这篇URL。 https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList

提到

onremovetrack An event handler to call when the removetrack event is sent, indicating that a text track has been removed from the media element.

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

Answer 3

这可以使用 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]);
}

Answer 4

     //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);
        }

从视频中删除 TextTrack

Delete a TextTrack from a video

html

javascript

html5-video

media-source

mpeg-dash