kencoba/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.button {
				width: 40%;
				text-align: left;
			}
		</style>
	</head>
<body onLoad="initialize()">
    <h2>Clojure Programming</h2>
    <h2 id="chapter1Caption"></h2>
    <p>
        <video id="chapter1Video" width="640" height="360" controls>
        </video>
        <br/>
        <div id="chapter1Marks">
        </div>
    </p>


    <h2 id="chapter2Caption"></h2>
    <p>
        <video id="chapter2Video" width="640" height="360" controls>
        </video>
        <br/>
        <div id="chapter2Marks">
        </div>
    </p>
	<script type="text/javascript">
        var chapter1 = {
            "captionId" : "chapter1Caption",
            "videoId" : "chapter1Video",
            "marksId" : "chapter1Marks",
            "captionText" : "Chapter1 Introduction",
            "src" : "Chapter1_Introduction.mp4",
            "marks" : [
                [ "00:00:00", "1.1 First"],
                [ "00:32:29", "1.2 Second"],
                [ "00:37:03", "1.3 Third"],
                [ "01:03:24", "1.4 Fourth"],
                [ "01:36:46", "1.5 Fifth"],
                [ "01:42:55", ""]
            ]
        };

        var chapter2 = {
            "captionId" : "chapter2Caption",
            "videoId" : "chapter2Video",
            "marksId" : "chapter2Marks",
            "captionText" : "Chapter2 REPL",
            "src" : "Chapter2_REPL.mp4",
            "marks" : [
                ["00:00:00","2.1 First"],
                ["00:07:55","2.2 Second"],
                ["00:25:13","2.3 Third"],
                ["00:59:04","2.4 Fourth"],
                ["01:01:58", ""]
            ]
        };

        function initialize() {
            setContents(chapter1);
            setContents(chapter2);
        }

        function setContents(chapterInfo) {
            setCaption(chapterInfo['captionId'],chapterInfo['captionText']);
            setSrc(chapterInfo['videoId'], chapterInfo['src']);
            setMarks(chapterInfo['marksId'], chapterInfo['videoId'], chapterInfo['marks']);
        }

        function setCaption(captionId, captionText) {
            document.getElementById(captionId).innerHTML = captionText;
        }

        function setSrc(videoId, src) {
            document.getElementById(videoId).setAttribute("src",src);
        }

        function setMarks(marksId, videoId, marks) {

            var _marks = [];
            for (var i = 0; i < marks.length -1; i++) {
                var startTime = marks[i][0];
                var endTime = marks[i+1][0];
                var title = marks[i][1];
                _marks.push([startTime,endTime,title]);
            }

            var marksDiv = document.getElementById(marksId);
            _marks.forEach(function(val) {
                var startTime = val[0];
                var endTime = val[1];
                var title = val[2];
                var interval = toHms(toSec(endTime) - toSec(startTime));
                var input = document.createElement("input");
                input.setAttribute("type","button");
                input.setAttribute("class","button");
                input.setAttribute("value",title + "[" + interval + "]");
                input.setAttribute("onClick","playAt('" + videoId + "','" + startTime + "')");
                marksDiv.appendChild(input);
                var br = document.createElement("br");
                marksDiv.appendChild(br);
            });
        }

        function toHms(sec) {
            var hour = Math.floor(sec / (60 * 60));
            var hRem = sec % (60 * 60);
            var minute = Math.floor(hRem / 60);
            var seconds = hRem % 60;

            var hStr = ("0"+hour).slice(-2)
            var mStr = ("0"+minute).slice(-2)
            var sStr = ("0"+seconds).slice(-2)
            return hStr + ":" + mStr + ":" + sStr;
        }

	function toSec(hms) {
		var regexp = /(\d\d):(\d\d):(\d\d)/;

		var matched = hms.match(regexp);

		var hour = Number(matched[1]);
		var minute = Number(matched[2]);
		var seconds = Number(matched[3]);

		return (hour*60*60) + (minute*60) + seconds;
	}

	function playAt(id,hms) {
		document.getElementById(id).currentTime = toSec(hms);
	}
	</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<style>
	.button {
	width: 40%;
	text-align: left;
	}
	</style>
	</head>
	<body onLoad="initialize()">
	<h2>Clojure Programming</h2>
	<h2 id="chapter1Caption"></h2>
	<p>
	<video id="chapter1Video" width="640" height="360" controls>
	</video>
	<br/>
	<div id="chapter1Marks">
	</div>
	</p>


	<h2 id="chapter2Caption"></h2>
	<p>
	<video id="chapter2Video" width="640" height="360" controls>
	</video>
	<br/>
	<div id="chapter2Marks">
	</div>
	</p>
	<script type="text/javascript">
	var chapter1 = {
	"captionId" : "chapter1Caption",
	"videoId" : "chapter1Video",
	"marksId" : "chapter1Marks",
	"captionText" : "Chapter1 Introduction",
	"src" : "Chapter1_Introduction.mp4",
	"marks" : [
	[ "00:00:00", "1.1 First"],
	[ "00:32:29", "1.2 Second"],
	[ "00:37:03", "1.3 Third"],
	[ "01:03:24", "1.4 Fourth"],
	[ "01:36:46", "1.5 Fifth"],
	[ "01:42:55", ""]
	]
	};

	var chapter2 = {
	"captionId" : "chapter2Caption",
	"videoId" : "chapter2Video",
	"marksId" : "chapter2Marks",
	"captionText" : "Chapter2 REPL",
	"src" : "Chapter2_REPL.mp4",
	"marks" : [
	["00:00:00","2.1 First"],
	["00:07:55","2.2 Second"],
	["00:25:13","2.3 Third"],
	["00:59:04","2.4 Fourth"],
	["01:01:58", ""]
	]
	};

	function initialize() {
	setContents(chapter1);
	setContents(chapter2);
	}

	function setContents(chapterInfo) {
	setCaption(chapterInfo['captionId'],chapterInfo['captionText']);
	setSrc(chapterInfo['videoId'], chapterInfo['src']);
	setMarks(chapterInfo['marksId'], chapterInfo['videoId'], chapterInfo['marks']);
	}

	function setCaption(captionId, captionText) {
	document.getElementById(captionId).innerHTML = captionText;
	}

	function setSrc(videoId, src) {
	document.getElementById(videoId).setAttribute("src",src);
	}

	function setMarks(marksId, videoId, marks) {

	var _marks = [];
	for (var i = 0; i < marks.length -1; i++) {
	var startTime = marks[i][0];
	var endTime = marks[i+1][0];
	var title = marks[i][1];
	_marks.push([startTime,endTime,title]);
	}

	var marksDiv = document.getElementById(marksId);
	_marks.forEach(function(val) {
	var startTime = val[0];
	var endTime = val[1];
	var title = val[2];
	var interval = toHms(toSec(endTime) - toSec(startTime));
	var input = document.createElement("input");
	input.setAttribute("type","button");
	input.setAttribute("class","button");
	input.setAttribute("value",title + "[" + interval + "]");
	input.setAttribute("onClick","playAt('" + videoId + "','" + startTime + "')");
	marksDiv.appendChild(input);
	var br = document.createElement("br");
	marksDiv.appendChild(br);
	});
	}

	function toHms(sec) {
	var hour = Math.floor(sec / (60 * 60));
	var hRem = sec % (60 * 60);
	var minute = Math.floor(hRem / 60);
	var seconds = hRem % 60;

	var hStr = ("0"+hour).slice(-2)
	var mStr = ("0"+minute).slice(-2)
	var sStr = ("0"+seconds).slice(-2)
	return hStr + ":" + mStr + ":" + sStr;
	}

	function toSec(hms) {
	var regexp = /(\d\d):(\d\d):(\d\d)/;

	var matched = hms.match(regexp);

	var hour = Number(matched[1]);
	var minute = Number(matched[2]);
	var seconds = Number(matched[3]);

	return (hour6060) + (minute*60) + seconds;
	}

	function playAt(id,hms) {
	document.getElementById(id).currentTime = toSec(hms);
	}
	</script>
	</body>
	</html>