load SRT file into WebVTT track for a video element in the page

srtize.js

'use strict';

function parseTime(s) {
  let t = 0;
  const p = s.split(':');
  let ss = p.pop().replace(',', '.');
  t += parseFloat(ss);
  ss = parseInt( p.pop() || '0', 10);
  t += ss * 60;
  ss = parseInt( p.pop() || '0', 10);
  t += ss * 60 * 60;
  return t;
}

function stripMarkup(s) {
  const el = document.createElement('div');
  el.innerHTML = s;
  return el.textContent || el.innerText || '';
}

function isntEmptyO(o) {
  return typeof o === 'object' && Object.keys(o).length > 0;
}

function parseSRT(blob, cb) {
  const reader = new FileReader();
  reader.addEventListener('loadend', function() {
    const s = reader.result;
    const lines = s.replace(/\r/g, '').split('\n');
    const captions = [];

    let cap = {};
    lines.forEach(function(l) {
      if (!l) {
        if ('i' in cap) {
          captions.push(cap);
          cap = {};
        }
        return;
      }

      if (isFinite(l) && !('i' in cap)) {
        cap.i = true;
        return;
      }

      if (!('s' in cap)) {
        const parts = l.split(' --> ');
        cap.s = parseTime(parts[0]);
        cap.e = parseTime(parts[1]);
        return;
      }

      if (!('t' in cap)) {
        cap.t = [];
      }
      cap.t.push( stripMarkup(l) );
    });

    if (isntEmptyO(cap)) {
      captions.push(cap);
    }
    
    let diff = prompt('diff in seconds', '0');
    if (isFinite(diff)) {
      diff = parseFloat(diff);
      captions.forEach(function(cap) {
        cap.s += diff;
        cap.e += diff;
      });
    }

    cb(captions);
  });
  reader.readAsText(blob);
}

function styleCaptions() {
  const css = `::cue { color: #FFF; background-color: transparent; font-size:5vh; text-shadow: 0 0 1 #000, 0 0 2 #000; }`;
  const st = document.createElement('style');
  st.type = 'text/css';
  st.innerHTML = css;
  document.head.appendChild(st);
}

function addCaptions(videoEl, captions) {
  const track = videoEl.addTextTrack('captions', 'English', 'en');
  track.mode = 'showing';
  captions.forEach(function(cap) {
    track.addCue( new VTTCue(cap.s, cap.e, stripMarkup( cap.t.join('\n') ) ) ); 
  });
}

function subs() {
  const videoEl = document.querySelector('video');
  const inputEl = document.createElement('input');
  inputEl.type = 'file';
  inputEl.appendChild(document.createTextNode('SRT'));
  document.body.appendChild(inputEl);
  inputEl.click();
  inputEl.addEventListener('change', function() {
    parseSRT(inputEl.files[0], function(captions) {
      window._captions_ = captions; // for debugging only
      document.body.removeChild(inputEl);
      styleCaptions();
      addCaptions(videoEl, captions);
    });
  });
}

subs();

bookmarklet version (create a new bookmark and edit the URL to the code below, then on the page with the video just click on the bookmark to choose the SRT file and optionally correct the subtitle timing):

javascript:(function()%7B'use%20strict'%3Bfunction%20parseTime(a)%7Blet%20b%3D0%3Bconst%20c%3Da.split('%3A')%3Blet%20d%3Dc.pop().replace('%2C'%2C'.')%3Breturn%20b%2B%3DparseFloat(d)%2Cd%3DparseInt(c.pop()%7C%7C'0'%2C10)%2Cb%2B%3D60*d%2Cd%3DparseInt(c.pop()%7C%7C'0'%2C10)%2Cb%2B%3D60*(60*d)%2Cb%7Dfunction%20stripMarkup(a)%7Bconst%20b%3Ddocument.createElement('div')%3Breturn%20b.innerHTML%3Da%2Cb.textContent%7C%7Cb.innerText%7C%7C''%7Dfunction%20isntEmptyO(a)%7Breturn'object'%3D%3Dtypeof%20a%26%260%3CObject.keys(a).length%7Dfunction%20parseSRT(a%2Cb)%7Bconst%20c%3Dnew%20FileReader%3Bc.addEventListener('loadend'%2Cfunction()%7Bconst%20d%3Dc.result%2Ce%3Dd.replace(%2F%5Cr%2Fg%2C'').split('%5Cn')%2Cf%3D%5B%5D%3Blet%20g%3D%7B%7D%3Be.forEach(function(i)%7Bif(!i)return%20void('i'in%20g%26%26(f.push(g)%2Cg%3D%7B%7D))%3Bif(isFinite(i)%26%26!('i'in%20g))return%20void(g.i%3D!0)%3Bif(!('s'in%20g))%7Bconst%20j%3Di.split('%20--%3E%20')%3Breturn%20g.s%3DparseTime(j%5B0%5D)%2Cvoid(g.e%3DparseTime(j%5B1%5D))%7D't'in%20g%7C%7C(g.t%3D%5B%5D)%2Cg.t.push(stripMarkup(i))%7D)%2CisntEmptyO(g)%26%26f.push(g)%3Blet%20h%3Dprompt('diff%20in%20seconds'%2C'0')%3BisFinite(h)%26%26(h%3DparseFloat(h)%2Cf.forEach(function(i)%7Bi.s%2B%3Dh%2Ci.e%2B%3Dh%7D))%2Cb(f)%7D)%2Cc.readAsText(a)%7Dfunction%20styleCaptions()%7Bconst%20a%3D%60%3A%3Acue%20%7B%20color%3A%20%23FFF%3B%20background-color%3A%20transparent%3B%20font-size%3A5vh%3B%20text-shadow%3A%200%200%201%20%23000%2C%200%200%202%20%23000%3B%20%7D%60%2Cb%3Ddocument.createElement('style')%3Bb.type%3D'text%2Fcss'%2Cb.innerHTML%3Da%2Cdocument.head.appendChild(b)%7Dfunction%20addCaptions(a%2Cb)%7Bconst%20c%3Da.addTextTrack('captions'%2C'English'%2C'en')%3Bc.mode%3D'showing'%2Cb.forEach(function(d)%7Bc.addCue(new%20VTTCue(d.s%2Cd.e%2CstripMarkup(d.t.join('%5Cn'))))%7D)%7Dfunction%20subs()%7Bconst%20a%3Ddocument.querySelector('video')%2Cb%3Ddocument.createElement('input')%3Bb.type%3D'file'%2Cb.appendChild(document.createTextNode('SRT'))%2Cdocument.body.appendChild(b)%2Cb.click()%2Cb.addEventListener('change'%2Cfunction()%7BparseSRT(b.files%5B0%5D%2Cfunction(c)%7Bwindow._captions_%3Dc%2Cdocument.body.removeChild(b)%2CstyleCaptions()%2CaddCaptions(a%2Cc)%7D)%7D)%7Dsubs()%7D)()