CODEWITHSUNDEEP
javascripthtmlhtml5-videomedia-sourcempeg-dash
frapontillo
frapontillo

Reputation: 10689

Delete a TextTrack from a video

Is there a good way to delete a single TextTrack added via JavaScript to a HTML5 <video> tag? The following code is a simple demo of how to add a track, but I haven't found a good way to remove one:

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

Upvotes: 5

Views: 7055

Answers (6)

X Digital
X Digital

Reputation: 1

There is no removeTextTrack yet. but you can empty the cues in a TextTrack to replace them with another list of new cues by using removeCue method.

This is what I use to replace subtitles of video using javascript

    /** empty TextTrack ***/
    track = document.querySelector("video").textTracks[0];
    if (track.cues) {
      while (track.cues.length) track.removeCues(track.cues[0]);
    }

Upvotes: 0

FredG
FredG

Reputation: 869

Much more verbose, but you could use the DOM API. Most of the work is to find the correspondence between the DOM TrackElement and the TextTrack from video.textTracks.

A track added with video.addTextTrack strangely do not get added to the DOM.

Add track

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];

Remove track

this.videoElement.removeChild(this.trackElement_);
this.trackElement_ = null;
this.textTrack_ = null;

Upvotes: 0

John
John

Reputation: 3545

Implementation of TextTrackList

Please refer to this URL first if you did not read. https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList

It metioned that

addtrack

Fired when a new text track has been added to the media element.

removetrack

Fired when a new text track has been removed from the media element.

As you can see from the above, addtrack and removetrack events are dependent on HTMLMediaElement.

Remove track with DOM element .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.textTracks console output

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", …}

Disable Track

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

addTextTrack & removeTextTrack

addTextTrack method will not create track element to HTMLMediaElement, thus you need to create and append track element manually if you need to remove a track using DOM element.

There is no removeTextTrack method at the moment. If you need removeTextTrack please visit the following as @Endless mentioned from the above comment. https://github.com/whatwg/html/issues/1921

Upvotes: 2

anu go
anu go

Reputation: 11

//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>

Upvotes: 1

Phong Phuong
Phong Phuong

Reputation: 613

This can be done using javascript and the VideoJS library (tested and works with 1 or more tracks):

Get the media player object in the DOM using some sort of selector, then get all it's tracks, then remove them one by one by iterating through the array in reverse order.

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

Upvotes: 1

user1693593
user1693593

Reputation:

There is no mechanism to remove an added text-track (probably a flaw (?) in the current specification. There is also an onremovetrack event but...).

The only thing we can do is to disable or hide it. Make sure you keep a reference to the track:

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

Then when you no longer need it:

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

(you might get around resetting the src as well, but I haven't tried this..)

Upvotes: 5

Related Questions