Simple Video Chapteriser

Pulls in a set of chapter and transcript links, each with a data-seconds attribute pointing to part of the Youtube video. Works in Blackboard or any website using Prototype 1.7.1.

by Paul Sijpkes

HTML

<div id='videoChaptersMain' style='min-width: 870px; width: 870px;'>
<!-- note change // to http:// or https:// if running on your local machine-->
<div id='videoContainer' style="height: 315px; width: 460px; float: left; border: thin solid black;"><iframe id="video1" width="460" height="315" src="https://www.youtube.com/embed/-a2cEzsMEMY" allowfullscreen="" frameborder="0"></iframe></div>

<div style="height: 650px; width: 320px; float: left; margin-left: 10px; margin-top: -16px;">
<h2>Transcript</h2>
<div class='transcript' style="border: thin solid #dddddd; width: 320px; height: 664px; margin-top: -15px; margin-left: 0px;overflow:auto">
<style>
ul, li {
	list-style: square
}
</style>
<h2 id='chapter_start_1'>Chapter 1</h2>
<p data-seconds='0m01s'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie, purus iaculis aliquam dapibus, odio nisi sodales metus, sed dictum lacus risus eget mi. Nam porta sollicitudin urna lacinia vestibulum. Quisque a sem risus. Aliquam in scelerisque justo. Phasellus mattis, elit ac imperdiet porttitor, enim nisi venenatis ipsum, non mattis nulla nunc a diam. Curabitur ut justo faucibus, placerat diam nec, aliquam lorem. Integer consectetur tellus dui, sed sollicitudin eros rhoncus eu. Vestibulum vel mauris ac mi consequat imperdiet. Curabitur lobortis dui eleifend ipsum porttitor, vitae tempor erat posuere. Curabitur facilisis nisi id nunc luctus imperdiet. Duis sit amet metus in felis accumsan scelerisque vel ut augue. Quisque dui nulla, commodo sit amet diam id, vestibulum tempus enim.
</p>
<h2 id='chapter_start_2'>Chapter 2</h2>
<p data-seconds='4m08s'>
Nam fermentum blandit ante volutpat eleifend. Morbi sem odio, dapibus non neque a, consectetur tristique nibh. Vivamus suscipit pharetra tristique. Mauris suscipit, nisl vel fringilla auctor, eros massa placerat neque, vel tincidunt purus tellus iaculis nisi. Donec ipsum lorem, convallis sit amet enim lobortis, tincidunt placerat enim. Nullam sit amet lacus nisl....

JavaScript

/*
By Paul Sijpkes, Centre for Teaching and Learning, University of Newcastle, NSW Australia.
*/
	var videoChaptersCSS = "<style>.chapters li.chapter {list-style: none;width: 451px;margin-left: 0;padding: 5px;color: #111;margin-top: -1px;margin-left: -1px;border-top: thin solid #ddd;border-bottom: thin solid #ddd;}.chapters li.chapter:hover {background-color: #333;color: #eee;cursor: pointer;}.chapters>ul {margin: 0 !important;padding: 0 !important;}.transcript > p {position: relative;padding: 8px;margin-top: 0;margin-bottom: 1px;}.transcript > p:hover {cursor: pointer;border-top: thin solid #ddd;border-bottom: thin solid #ddd;margin-top: -1px;margin-bottom: 0;background-color: #333;color:#eee}.transcript > p >.time {position: absolute;bottom: 5px;left: 255px;width: 55px;color: #000;padding: 0.3em;background-color: #fff;font-family: helvetica, arial, sans-serif;display: none;opacity:0.7}.time {font-size: 12px;}</style>";
		
function setChapters(iframeID) {
if ( typeof window.orig_video === 'undefined') {
	window.orig_video = [];
}

window.orig_video[iframeID] = $(iframeID).clone(true);

window.totals = [];

$("videoChaptersMain").insert({ 'before' : videoChaptersCSS });

var index = 0;

$$(".chapters li, .transcript > p").each(function(me){
	console.log(">> "+me.readAttribute('data-seconds'));
	
	var seconds = me.readAttribute('data-seconds');
	if(seconds == null) return;
	
	seconds = seconds.toLowerCase();
	
	if(!isNaN(seconds)) { 
		total = seconds;
	} else if(seconds.indexOf('m') != -1 && seconds.indexOf('s') != -1) {
		/* youtube dropped old min/secs format, now we convert what's there to pure seconds */
		var splsec = seconds.split('m');
		o_minn = Number(splsec[0]);
		sec = Number(splsec[1].split('s')[0]);
		
		total = (o_minn * 60) + sec;
		
		totals[index] = total;
	}
	
	me.insert("<div class='time' style='float:right'>[" + o_minn + "m " + sec + "s]&nbsp;&nbsp;</div>");
	me.writeAttribute("data-index", index);
	
	me.observe('click', function(e) {
			if (...