HartS/player.html

## player.html
<head>
  <!-- Edit myvideo.mp4 and mysubtitles.srt to reference your filenames -->
  <link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="none"
    width="640"
    height="264"
    data-setup="{}"
  >
    <source src="myvideo.mp4" type="video/mp4" />
    <!--source src="MY_VIDEO.webm" type="video/webm" /-->
<!--track kind="subtitles" src="subtitles.srt" srclang="en" label="English" default-->
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
  <script>
        function convert() {
          var input = document.getElementById("srt");
          var output = document.getElementById("webvtt");
          var srt = input.value;
          var webvtt = srt2webvtt(srt);
          output.innerHTML = "<textarea rows=20 cols=80>"
                             + webvtt +
                             "</textarea>";
        }

        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);
          }

          var line = 0;

          // detect identifier
          if (!s[0].match(/\d+:\d+:\d+/) && s[1].match(/\d+:\d+:\d+/)) {
            cue += s[0].match(/\w+/) + "\n";
            line += 1;
          }

          // get time strings
          if (s[line].match(/\d+:\d+:\d+/)) {
            // convert time string
            var m = s[1].match(/(\d+):(\d+):(\d+)(?:,(\d+))?\s*--?>\s*(\d+):(\d+):(\d+)(?:,(\d+))?/);
            if (m) {
              cue += m[1]+":"+m[2]+":"+m[3]+"."+m[4]+" --> "
                    +m[5]+":"+m[6]+":"+m[7]+"."+m[8]+"\n";
              line += 1;
            } else {
              // Unrecognized timestring
              return "";
            }
          } else {
            // file format error or comment lines
            return "";
          }

          // get cue text
          if (s[line]) {
            cue += s[line] + "\n\n";
          }

          return cue;
        }
async function main() {
vttdata = srt2webvtt(await (await fetch('http://lvh.me:8000/mysubtitles.srt')).text());
vttblob = new Blob([vttdata], {type : 'text/vtt'});
blobURL = URL.createObjectURL(vttblob);
player = videojs.getPlayer('my-video');
player.on('loadedmetadata', function() {
  this.addRemoteTextTrack({
    src: blobURL,
    srclang: 'en',
    label: 'english',
    kind: 'subtitles'
  }, true);
});

}
main()
  </script>
</body>

## srtserver.py
#!/usr/bin/env python3

from http.server import HTTPServer, SimpleHTTPRequestHandler, test
import sys

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)

if __name__ == '__main__':
    test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)
	<head>
	<!-- Edit myvideo.mp4 and mysubtitles.srt to reference your filenames -->
	<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />

	<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
	<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
	</head>

	<body>
	<video
	id="my-video"
	class="video-js"
	controls
	preload="none"
	width="640"
	height="264"
	data-setup="{}"
	>
	<source src="myvideo.mp4" type="video/mp4" />
	<!--source src="MY_VIDEO.webm" type="video/webm" /-->
	<!--track kind="subtitles" src="subtitles.srt" srclang="en" label="English" default-->
	<p class="vjs-no-js">
	To view this video please enable JavaScript, and consider upgrading to a
	web browser that
	<a href="https://videojs.com/html5-video-support/" target="_blank"
	>supports HTML5 video</a
	>
	</p>
	</video>

	<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
	<script>
	function convert() {
	var input = document.getElementById("srt");
	var output = document.getElementById("webvtt");
	var srt = input.value;
	var webvtt = srt2webvtt(srt);
	output.innerHTML = "<textarea rows=20 cols=80>"
	+ webvtt +
	"</textarea>";
	}

	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);
	}

	var line = 0;

	// detect identifier
	if (!s[0].match(/\d+:\d+:\d+/) && s[1].match(/\d+:\d+:\d+/)) {
	cue += s[0].match(/\w+/) + "\n";
	line += 1;
	}

	// get time strings
	if (s[line].match(/\d+:\d+:\d+/)) {
	// convert time string
	var m = s[1].match(/(\d+):(\d+):(\d+)(?:,(\d+))?\s--?>\s(\d+):(\d+):(\d+)(?:,(\d+))?/);
	if (m) {
	cue += m[1]+":"+m[2]+":"+m[3]+"."+m[4]+" --> "
	+m[5]+":"+m[6]+":"+m[7]+"."+m[8]+"\n";
	line += 1;
	} else {
	// Unrecognized timestring
	return "";
	}
	} else {
	// file format error or comment lines
	return "";
	}

	// get cue text
	if (s[line]) {
	cue += s[line] + "\n\n";
	}

	return cue;
	}
	async function main() {
	vttdata = srt2webvtt(await (await fetch('http://lvh.me:8000/mysubtitles.srt')).text());
	vttblob = new Blob([vttdata], {type : 'text/vtt'});
	blobURL = URL.createObjectURL(vttblob);
	player = videojs.getPlayer('my-video');
	player.on('loadedmetadata', function() {
	this.addRemoteTextTrack({
	src: blobURL,
	srclang: 'en',
	label: 'english',
	kind: 'subtitles'
	}, true);
	});

	}
	main()
	</script>
	</body>
	#!/usr/bin/env python3

	from http.server import HTTPServer, SimpleHTTPRequestHandler, test
	import sys

	class CORSRequestHandler (SimpleHTTPRequestHandler):
	def end_headers (self):
	self.send_header('Access-Control-Allow-Origin', '*')
	SimpleHTTPRequestHandler.end_headers(self)

	if __name__ == '__main__':
	test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)