JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<video width="100%" height="100%" id="player" playsinline controls 
 src="https://d3v55qvjb2v012.cloudfront.net/VyZD/2019/09/05/20/02/cqQhYntxWS/sc.mp4?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kM3Y1NXF2amIydjAxMi5jbG91ZGZyb250Lm5ldC9WeVpELzIwMTkvMDkvMDUvMjAvMDIvY3FRaFludHhXUy9zYy5tcDQiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE1Njk1OTc2MzZ9fX1dfQ__&Signature=cLZnn9F5lGWLPPP84NblkzFuBN22DmbO3wrauc6ccjYI1ceuTelZpZcyrsfY-aiUsye9NpLnTdHwlvlRX4Vkd7y6lELgpbpxq~z3BCoRYT--t9liuynVuqA~UZ6sn1AD-LNHcb46RCJMQPBbIvI3xIgTQHT2ihjxq781ntPtE5I_&Key-Pair-Id=APKAI4E2RN57D46ONMEQ">
	 
</video>

JavaScript

var path="https://d3u8f3tn6a5mjs.cloudfront.net/cf/0/jwcaptions/366684/6561706/1567713758/2/captions.srt";

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            // The request is done; did it work?
            if (xhr.status == 200) {
                // ***Yes, use `xhr.responseText` here***
                console.log(xhr.responseText);
                 var webvtt = srt2webvtt(xhr.responseText);
                 console.log(webvtt);
								 var trackElement=document.createElement("track");
                 trackElement.kind="captions";
                 trackElement.label="English Subtitles1";
                 trackElement.srclang="en";
                 trackElement.src="data:text/vtt,"+encodeURIComponent(webvtt);
                 trackElement.default=true;
                 document.getElementById("player").appendChild(trackElement);
            } 
        }
    };
    xhr.open("GET", path);
    xhr.send();
    
    //https://stackoverflow.com/questions/40201137/i-need-to-read-a-text-file-from-a-javascript

function srt2webvtt(data) {
      // remove dos newlines
      var srt = data.replace(/\r+/g, '');
      // trim white space start and end
      srt = srt.replace(/^\s+|\s+$/g, '');
      // get cues
      var cuelist = srt.split('\n\n');
      var result = "";
      if (cuelist.length > 0) {
        result += "WEBVTT\n\n";
        for (var i = 0; i < cuelist.length; i=i+1) {
          	result += convertSrtCue(cuelist[i]);
        }
      }
      return result;
    }
    function convertSrtCue(caption) {
      // remove all html tags for security reasons
      //srt = srt.replace(/<[a-zA-Z\/][^>]*>/g, '');
      var cue = "";
      var s = caption.split(/\n/);
      // concatenate muilt-line string separated in array into one
      while (s.length > 3) {
          for (var i = 3; i < s.length; i++) {
              s[2] += "\n" + s[i]
          }
          s.splice(3, s.length - 3);
      }
  ...