MediaElment.js : How to change the source files of subtitles (track element) on the fly?

How to change the source files of subtitles on the fly (originally defined in the HTML via <track> element) when changing a video source (via the setS开发者_运维百科rc() method) ?

In other words, when playing a video I use setSrc() method to change video source and I would also redefine the subtitle files (SRT) linked.

A trick I devised was to set an ID on the subtitle track

<track id="subtitles" kind="subtitles" src="subtitles.srt" srclang="en" />

Then inside of whatever event you need you can use:

$('#subtitles').attr('src', 'different_subtitles.srt');
player.findTracks();
player.loadTrack(0);
player.setSrc('different_video.mp4');

There may be a more elegant way to go about this and MediaElementJS really should provide an API for this. But in the meantime this trick should get you by.

This doesn't quite work for every event (like 'ended'). While this code does reliably load & change the TRACK source, if you have a language already displaying, it will not display the newly 'sourced' TRACK with a new video unless the CC is set to None and then a language.

Another approach is to remove the whole video element and replace it with a new video element with all its new track elements.

You can achieve this by replacing the innerHTML of the video's parent element:

document.getElementById('videoparent').innerHTML='<video src="url-to-my-video.mp4" controls=""><track src="url-to-my-subtitle.vtt" default="" srclang="de" label="My subtitle"></video>';

Works fine at least in Firefox 87 and Chromium 89.