denilsonsa · July 15, 2024 18:07 · denilsonsa · Oct 21, 2020 · ghost · Nov 22, 2020
diff --git a/README.md b/README.md
diff --git a/play_local_video_with_vtt_subtitles-solution-1.html b/play_local_video_with_vtt_subtitles-solution-1.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>(1) Playing a local video</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <style>
 html, body {
 	background: black;
 	color: white;
 }
 html, body, video {
 	padding: 0;
 	margin: 0;
 }
 video {
 	position: absolute;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	width: 100%;
 	height: 100%;
 }
 </style>
 </head>
 <body>

 <video controls>
 <source src="Your local video file.mp4" type="video/mp4">
 <!--
 Fails on Chrome with:
 Unsafe attempt to load URL file:…/solution-1.vtt from frame with URL file:…/play_local_video_with_vtt_subtitles-solution-1.html. 'file:' URLs are treated as unique security origins.
 Fails on Firefox:
 Security Error: Content at file:…/play_local_video_with_vtt_subtitles-solution-1.html may not load data from file:…/solution-1.vtt.
 -->
 <track kind="subtitles" label="English" srclang="en" default src="solution-1.vtt">
 </video>
 </body>
 </html>
diff --git a/play_local_video_with_vtt_subtitles-solution-2.html b/play_local_video_with_vtt_subtitles-solution-2.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>(2) Playing a local video</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <style>
 html, body {
 	background: black;
 	color: white;
 }
 html, body, video {
 	padding: 0;
 	margin: 0;
 }
 video {
 	position: absolute;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	width: 100%;
 	height: 100%;
 }
 </style>
 </head>
 <body>

 <video controls>
 <source src="Your local video file.mp4" type="video/mp4">
 <track kind="subtitles" label="English" srclang="en" default src="data:text/vtt;charset=utf-8,WEBVTT%0D%0A%0D%0A1%0D%0A00%3A00%3A02.500%20--%3E%2000%3A00%3A05.250%0D%0AInstead%20of%20loading%20an%20external%20.vtt%20file%2C%0D%0A%0D%0A2%0D%0A00%3A00%3A05.250%20--%3E%2000%3A00%3A09.750%0D%0AThe%20workaround%20is%20to%20add%20it%20as%20a%20data%3A%20URI%2C%0D%0A%0D%0A3%0D%0A00%3A00%3A10.001%20--%3E%2000%3A00%3A15.000%0D%0Abut%20it%20can%20get%20too%20long%2C%0D%0Aand%20still%20suffer%20from%20cross-origin.">
 </video>
 </body>
 </html>
diff --git a/play_local_video_with_vtt_subtitles-solution-3.html b/play_local_video_with_vtt_subtitles-solution-3.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>(3) Playing a local video</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <style>
 html, body {
 	background: black;
 	color: white;
 }
 html, body, video {
 	padding: 0;
 	margin: 0;
 }
 video {
 	position: absolute;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	width: 100%;
 	height: 100%;
 }
 </style>
 </head>
 <body>

 <video controls>
 <source src="Your local video file.mp4" type="video/mp4">
 </video>

 <!-- Check https://quuz.org/webvtt/ for validation. -->
 <script type="text/vtt" id="subtitle" data-label="English" data-lang="en">
 WEBVTT

 1
 00:00:02.500 --> 00:00:05.250
 Instead of loading an external .vtt file,

 2
 00:00:05.250 --> 00:00:09.750
 The workaround is to embed it inside a script tag,

 3
 00:00:10.001 --> 00:00:13.000
 And then dynamically add it to the DOM,

 4
 00:00:13.001 --> 00:00:16.000
 Using a Blob URL.

 </script>

 <script>
 function init() {
 	// http://www.html5rocks.com/en/tutorials/track/basics/
 	// https://www.iandevlin.com/blog/2015/02/javascript/dynamically-adding-text-tracks-to-html5-video
 	var video = document.querySelector('video');
 	var subtitle = document.getElementById('subtitle');
 	var blob = new Blob([subtitle.textContent.trimStart()], {type: 'text/vtt'});
 	var track = document.createElement('track');
 	track.kind = 'subtitles';
 	track.label = subtitle.dataset.label;
 	track.srclang = subtitle.dataset.lang;
 	track.default = true;
 	track.src = URL.createObjectURL(blob);
 	video.appendChild(track);
 }
 init();
 </script>

 </body>
 </html>
diff --git a/play_local_video_with_vtt_subtitles-solution-5.html b/play_local_video_with_vtt_subtitles-solution-5.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>(5) Playing a local video</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <style>
 html, body {
 	background: black;
 	color: white;
 }
 html, body, video {
 	padding: 0;
 	margin: 0;
 }
 video {
 	position: absolute;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	width: 100%;
 	height: 100%;
 }
 </style>
 </head>
 <body>

 <video controls>
 <source src="Your local video file.mp4" type="video/mp4">
 </video>

 <!-- Check https://quuz.org/webvtt/ for validation. -->
 <script type="text/vtt" id="subtitle" data-label="English" data-lang="en">
 WEBVTT

 1
 00:00:02.500 --> 00:00:05.250
 Instead of loading an external .vtt file,

 2
 00:00:05.250 --> 00:00:09.750
 The workaround is to embed it inside a script tag,

 3
 00:00:10.001 --> 00:00:15.000
 And then parse it using JavaScript
 and dynamically add it as a new TextTrack.

 </script>

 <script>
 function parse_timestamp(s) {
 	//var match = s.match(/^(?:([0-9]{2,}):)?([0-5][0-9]):([0-5][0-9][.,][0-9]{0,3})/);
 	// Relaxing the timestamp format:
 	var match = s.match(/^(?:([0-9]+):)?([0-5][0-9]):([0-5][0-9](?:[.,][0-9]{0,3})?)/);
 	if (match == null) {
 		throw 'Invalid timestamp format: ' + s;
 	}
 	var hours = parseInt(match[1] || "0", 10);
 	var minutes = parseInt(match[2], 10);
 	var seconds = parseFloat(match[3].replace(',', '.'));
 	return seconds + 60 * minutes + 60 * 60 * hours;
 }

 // https://w3c.github.io/webvtt/
 // https://developer.mozilla.org/en/docs/Web/API/Web_Video_Text_Tracks_Format
 // https://en.wikipedia.org/wiki/WebVTT
 //
 // For better parsers, look at:
 // https://github.com/annevk/webvtt
 // https://github.com/mozilla/vtt.js
 function quick_and_dirty_vtt_or_srt_parser(vtt) {
 	var lines = vtt.trim().replace('\r\n', '\n').split(/[\r\n]/).map(function(line) {
 		return line.trim();
 	});
 	var cues = [];
 	var start = null;
 	var end = null;
 	var payload = null;
 	for (var i = 0; i < lines.length; i++) {
 		if (lines[i].indexOf('-->') >= 0) {
 			var splitted = lines[i].split(/[ \t]+-->[ \t]+/);
 			if (splitted.length != 2) {
 				throw 'Error when splitting "-->": ' + lines[i];
 			}

 			// Already ignoring anything past the "end" timestamp (i.e. cue settings).
 			start = parse_timestamp(splitted[0]);
 			end = parse_timestamp(splitted[1]);
 		} else if (lines[i] == '') {
 			if (start && end) {
 				var cue = new VTTCue(start, end, payload);
 				cues.push(cue);
 				start = null;
 				end = null;
 				payload = null;
 			}
 		} else if(start && end) {
 			if (payload == null) {
 				payload = lines[i];
 			} else {
 				payload += '\n' + lines[i];
 			}
 		}
 	}
 	if (start && end) {
 		var cue = new VTTCue(start, end, payload);
 		cues.push(cue);
 	}

 	return cues;
 }

 function init() {
 	// http://www.html5rocks.com/en/tutorials/track/basics/
 	// https://www.iandevlin.com/blog/2015/02/javascript/dynamically-adding-text-tracks-to-html5-video
 	var video = document.querySelector('video');
 	var subtitle = document.getElementById('subtitle');
 	var track = video.addTextTrack('subtitles', subtitle.dataset.label, subtitle.dataset.lang);
 	track.mode = "showing";
 	quick_and_dirty_vtt_or_srt_parser(subtitle.innerHTML).map(function(cue) {
 		track.addCue(cue);
 	});
 }
 init();
 </script>

 </body>
 </html>
diff --git a/solution-1.vtt b/solution-1.vtt
 WEBVTT

 1
 00:00:02.500 --> 00:00:05.250
 We can try loading an external .vtt file,

 2
 00:00:05.250 --> 00:00:09.750
 But it can suffer from cross-origin/same-origin,

 3
 00:00:10.001 --> 00:00:15.000
 Because file: isn't trustworthy.
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>(1) Playing a local video</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<style>
	html, body {
	background: black;
	color: white;
	}
	html, body, video {
	padding: 0;
	margin: 0;
	}
	video {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>

	<video controls>
	<source src="Your local video file.mp4" type="video/mp4">
	<!--
	Fails on Chrome with:
	Unsafe attempt to load URL file:…/solution-1.vtt from frame with URL file:…/play_local_video_with_vtt_subtitles-solution-1.html. 'file:' URLs are treated as unique security origins.
	Fails on Firefox:
	Security Error: Content at file:…/play_local_video_with_vtt_subtitles-solution-1.html may not load data from file:…/solution-1.vtt.
	-->
	<track kind="subtitles" label="English" srclang="en" default src="solution-1.vtt">
	</video>
	</body>
	</html>
	WEBVTT

	1
	00:00:02.500 --> 00:00:05.250
	We can try loading an external .vtt file,

	2
	00:00:05.250 --> 00:00:09.750
	But it can suffer from cross-origin/same-origin,

	3
	00:00:10.001 --> 00:00:15.000
	Because file: isn't trustworthy.