Bloated

You have 104 lines of code, that can easily by made more readable with some simple redunctions. Remove comments, same line open blocks {, and remove empty lines. That reduces the code to 54 lines.

Review

I can see you are somewhat new to JS

Some JS items

• Use const for variables that do not change.
• In JS we put the open block delimiter { on the same line.
• When using vars you should hoist them to the top of the function they are scoped to.
• Use arrow functions for anonymous functions.
• window is the default object, you don't need to use it. You don't use it for Blob eg new window.Blob( but next line down you use it for URL Why?
• Use shortest form. eg for(var i = 0;i < tracks.length;i++) { the index is not needed so for(const track of tracks) or tracks.forEach(subtitle.load) would be better;.
• Don't use substr it is on the great list of the depreciated. Use substring or slice
• Use function shorthand when declaring object function. Eg load: function(track) { should be load(track) {

Code style and logic

• comment are way over the top and just repeat what is self evident in the code.
• Space between if and (
• You don't use the second argument of the promise callback, so why define it?
• Don't use generic names for variables and arguments. new Promise( function (resolve, reject) { has no semantic meaning, something like new Promise(converted => { would be more apt.
• Don't add redundant code return filename.split('.').pop().toLowerCase() === 'srt' ? true : false; is identical to return filename.split('.').pop().toLowerCase() === 'srt';
• Why add the two functions isSrt and isVTT to the object. They are generic and can be defined once outside the object (BTW should it be isSrt or isSRT I don't know what it stands for, but if an acronym then it should be uppercase?)
• The random id can produce a string shorter than 7 characters. eg (1/36).toString(36).substr(2, 9) would create "1" not "1000000"
• I do not see the point of creating an random id (There is a definite chance of a clash) when you already have the element you want to query.

Structure

• Why create an object subtitle when its not needed?
• Why is subtitle: { data: { track: {}}... created. I can find no reference to it.
• You could have used the Fetch API rather than XMLHttpRequest

Alternative example.

A lot of bloat can be removed and the process can thus be viewed in one page, this improves maintainability, readability, and reduces the chance of bugs.

document.addEventListener("DOMContentLoaded", function () { const isSrt = name => name.split(".").pop().toLowerCase() === "srt"; const convert = content => new Promise(converted => { content = content.replace(/(\d+:\d+:\d+)+,(\d+)/g, "$1.$2"); content = "WEBVTT - Generated using SRT2VTT\r\n\r\n" + content; converted(URL.createObjectURL(new Blob([content], {type: "text/vtt"}))); }); for (const vid of document.getElementsByTagName("video")) { vid.addEventListener("loadstart", event => { const tracks = [...event.target.querySelectorAll("track")]; tracks.forEach(track => { if (isSrt(track.src)) { const client = new XMLHttpRequest(); client.open("GET", track.src); client.onreadystatechange = () => { convert(client.responseText).then(file => track.src = file); }; client.send(); } }); } } }); 

Update

To support legacy browsers you should use something like Babel. Please note this will not cover media textTrack support, only javascript