Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@HartS
Created January 7, 2024 11:01
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HartS/9bb2721fa73b6798efcdbf5c463e875f to your computer and use it in GitHub Desktop.
Save HartS/9bb2721fa73b6798efcdbf5c463e875f to your computer and use it in GitHub Desktop.
Chromecast subtitle player
<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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment