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

Question

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 setSrc() 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.

Answer 1

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.

Answer 2

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.