Add subtitles support

kwitts · Oct 28, 2015 · 5bba380 · 5bba380
1 parent 5527a7b
commit 5bba380
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -1,18 +1,17 @@
 # js-playlist
 A simple video playlist using HTML5 and vanilla JS. For a full how-to on how to build this, go to <a href="http://kristiwitts.com/blog/html-5-video-playlist-tutorial/">the full tutorial</a>.
 
-MIT License.
-
+## How to Use
 ---
 
-To use, create an HTML5 video container, like this:
-
+###HTML
 ```html
 <div id="player">
    <video controls="controls" width="640" height="360" preload="auto" autoplay>
       <source src="video1.mp4" type="video/mp4" />
       <source src="video1.webm" type="video/webm" />
       <source src="video1.ogv" type="video/ogg" />
+      <track src="video/video1.srt" kind="subtitle" srclang="en-US" label="English" /> <!--optional for subtitles-->
    </video>
    <div id="playlist">
       <h1>Videos</h1>
@@ -22,10 +21,35 @@ To use, create an HTML5 video container, like this:
    </div>
 </div>
 ```
+
+### Javascript
+```html
+<script type="text/javascript" src="path/to/js-playlist.js"></script>
+```
+
 ---
 
-If using the external JS file, copy this into your HTML page:
+## Including Subtitles
+---
+<i>Oct 28, 2015</i> - I was recently asked about subtitles. I added a coupe of lines to the playlist js file and it is included in the folder "subtitles". It requires the use of a plugin called <a href="https://github.com/thomassturm/VideoSub">VideoSub</a> by <a href="https://github.com/thomassturm">thomassturm</a>. All you need to do is use <a href="https://github.com/kwitts/js-playlist/blob/gh-pages/subtitles/js-playlist-sub.js">js-playlist-sub.js</a> instead of the original js-playlist.js and add two lines to your HTML file.
 
+#### Add this to the bottom of the video source list (inside the <video> tags)
 ```html
-<script type="text/javascript" src="js-playlist.js"></script>
+<track src="video/video1.srt" kind="subtitle" srclang="en-US" label="English" />
 ```
+
+#### Add the <a href="https://github.com/thomassturm/VideoSub">plugin</a>:
+```html
+<script type="text/javascript" src="path/to/videosub.js"></script>
+```
+
+If you need subtitles, visit <a href="https://github.com/thomassturm/VideoSub">https://github.com/thomassturm/VideoSub</a> for the plugin js file.
+
+## Release History
+---
+Oct 28 2015 - Added support for subtitles using plugin: <a href="https://github.com/thomassturm/VideoSub">VideoSub</a> by <a href="https://github.com/thomassturm">thomassturm</a>
+Jun 23 2015 - Initial commit.
+
+##License
+---
+Licensed under the MIT license. The plugin <a href="https://github.com/thomassturm/VideoSub">VideoSub</a> is licensed under MIT - &copy; <a href="https://github.com/thomassturm">thomassturm</a>.
diff --git a/subtitles.html b/subtitles.html
@@ -0,0 +1,59 @@
+
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<title>Simple Video Playlist with Subtitles</title>
+		<style>
+			body {font-family:Arial, Helvetica, sans-serif;background:#fff}
+			.center {text-align:center;width:640px;margin:0 auto;}
+			#player {background:#000; padding:10px;width:640px;margin:0 auto;border-radius:10px;}
+			#player video {width:640px;}
+			#playlist {background:#333;list-style:none;padding:0;margin:0; width:640px;}
+			#playlist h1 {font: 24px Arial, Helvetica, sans-serif; color:#FFF; font-weight:bold;padding:5px 2px;margin:0;}
+			#playlist a {color:#eeeedd;background:#333;padding:10px 5px;display:block;text-decoration:none;border-bottom:1px solid #222;}
+			#playlist a:hover {text-decoration:none; background:#999;color:#000}
+		</style>
+	</head>
+	<body>
+		<div id="player">
+			<video controls="controls" width="640" height="360" preload="auto" autoplay>
+				<source src="video/video1.mp4" type="video/mp4" />
+				<source src="video/video1.webm" type="video/webm" />
+				<source src="video/video1.ogv" type="video/ogg" />
+				<track src="video/video1.srt" kind="subtitle" srclang="en-US" label="English" />
+			</video>
+			<div id="playlist">
+				<h1>Videos</h1>
+				<a href="video/video1.mp4">Video 1</a>
+				<a href="video/video2.mp4">Video 2</a>
+				<a href="video/video3.mp4">Video 3</a>
+			</div>
+		</div>
+		<p><a href="http://github.com/kwitts/js-playlist">View Source on GitHub</a></p>
+		<script src="includes/videosub.js"></script> <!--Download this plugin for subtitles at https://github.com/thomassturm/VideoSub-->
+		<script>
+		//Ensure all links in the div "#player" act in the same way:
+			var video_playlist = document.getElementById("player"); //Element ID should be the same as the ID used in the container div in the HTML.
+			var links = video_playlist.getElementsByTagName('a');
+			for (var i=0; i<links.length; i++) {
+				links[i].onclick = handler;
+			};
+		//Give functionality to the links:
+		function handler(e) {
+			e.preventDefault(); //Prevents default action of links going directly to the source file
+			videotarget = this.getAttribute("href"); //looks at the filename in the link's href attribute
+			filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; //Splits the filename and takes everything before the ".", giving us just name without the extension
+			video = document.querySelector("#player video"); //Finds div #player and video
+			video.removeAttribute("poster"); //Removes the poster attribute in the video tag
+			source = document.querySelectorAll("#player video source, #player video track"); //Finds source and track elements inside the video tag
+			source[0].src = filename + ".mp4"; //defines the MP4 source
+			source[1].src = filename + ".webm"; //defines the WEBM source
+			source[2].src = filename + ".ogv"; //defines the OGG source
+			source[3].src = filename + ".srt"; //defines the SRT source (subtitles)
+			video.load(); //Loads video when video is selected
+			video.play(); //Plays video automatically
+		};
+		</script>
+	</body>
+</html>
diff --git a/subtitles/js-playlist-sub.js b/subtitles/js-playlist-sub.js
@@ -0,0 +1,24 @@
+//Simple JS Playlist by Kristi Witts - https://github.com/kwitts/js-playlist/
+//MIT License
+
+//Ensure all links in the div "#player" act in the same way:
+  var video_playlist = document.getElementById("player"); //Element ID should be the same as the ID used in the container div in the HTML.
+  var links = video_playlist.getElementsByTagName('a');
+  for (var i=0; i<links.length; i++) {
+    links[i].onclick = handler;
+  };
+//Give functionality to the links:
+function handler(e) {
+  e.preventDefault(); //Prevents default action of links going directly to the source file
+  videotarget = this.getAttribute("href"); //looks at the filename in the link's href attribute
+  filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; //Splits the filename and takes everything before the ".", giving us just name without the extension
+  video = document.querySelector("#player video"); //Finds div #player and video
+  video.removeAttribute("poster"); //Removes the poster attribute in the video tag
+  source = document.querySelectorAll("#player video source, #player video track"); //Finds source and track elements inside the video tag
+  source[0].src = filename + ".mp4"; //defines the MP4 source
+  source[1].src = filename + ".webm"; //defines the WEBM source
+  source[2].src = filename + ".ogv"; //defines the OGG source
+  source[3].src = filename + ".srt"; //defines the SRT source (subtitles)
+  video.load(); //Loads video when video is selected
+  video.play(); //Plays video automatically
+};
diff --git a/subtitles/subtitles.html b/subtitles/subtitles.html
@@ -0,0 +1,59 @@
+
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<title>Simple Video Playlist</title>
+		<style>
+			body {font-family:Arial, Helvetica, sans-serif;background:#fff}
+			.center {text-align:center;width:640px;margin:0 auto;}
+			#player {background:#000; padding:10px;width:640px;margin:0 auto;border-radius:10px;}
+			#player video {width:640px;}
+			#playlist {background:#333;list-style:none;padding:0;margin:0; width:640px;}
+			#playlist h1 {font: 24px Arial, Helvetica, sans-serif; color:#FFF; font-weight:bold;padding:5px 2px;margin:0;}
+			#playlist a {color:#eeeedd;background:#333;padding:10px 5px;display:block;text-decoration:none;border-bottom:1px solid #222;}
+			#playlist a:hover {text-decoration:none; background:#999;color:#000}
+		</style>
+	</head>
+	<body>
+		<div id="player">
+			<video controls="controls" width="640" height="360" preload="auto" autoplay>
+				<source src="video/video1.mp4" type="video/mp4" />
+				<source src="video/video1.webm" type="video/webm" />
+				<source src="video/video1.ogv" type="video/ogg" />
+				<track src="video/video1.srt" kind="subtitle" srclang="en-US" label="English" />
+			</video>
+			<div id="playlist">
+				<h1>Videos</h1>
+				<a href="video/video1.mp4">Video 1</a>
+				<a href="video/video2.mp4">Video 2</a>
+				<a href="video/video3.mp4">Video 3</a>
+			</div>
+		</div>
+		<p><a href="http://github.com/kwitts/js-playlist">View Source on GitHub</a></p>
+		<script src="includes/videosub.js"></script> <!--Download this plugin for subtitles at https://github.com/thomassturm/VideoSub-->
+		<script>
+		//Ensure all links in the div "#player" act in the same way:
+			var video_playlist = document.getElementById("player"); //Element ID should be the same as the ID used in the container div in the HTML.
+			var links = video_playlist.getElementsByTagName('a');
+			for (var i=0; i<links.length; i++) {
+				links[i].onclick = handler;
+			};
+		//Give functionality to the links:
+		function handler(e) {
+			e.preventDefault(); //Prevents default action of links going directly to the source file
+			videotarget = this.getAttribute("href"); //looks at the filename in the link's href attribute
+			filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; //Splits the filename and takes everything before the ".", giving us just name without the extension
+			video = document.querySelector("#player video"); //Finds div #player and video
+			video.removeAttribute("poster"); //Removes the poster attribute in the video tag
+			source = document.querySelectorAll("#player video source, #player video track"); //Finds source and track elements inside the video tag
+			source[0].src = filename + ".mp4"; //defines the MP4 source
+			source[1].src = filename + ".webm"; //defines the WEBM source
+			source[2].src = filename + ".ogv"; //defines the OGG source
+			source[3].src = filename + ".srt"; //defines the SRT source (subtitles)
+			video.load(); //Loads video when video is selected
+			video.play(); //Plays video automatically
+		};
+		</script>
+	</body>
+</html>