Proof of concept for a cross-platform chapter- and subchapter-navigation in videorecordings

gistfile1.html

<!--   
 See prototype here: http://lnx801.un.hrz.tu-darmstadt.de/recordings
 Author: Raphael Fetzer
-->

	<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
	<div id="mediaplayer">JW Player goes here</div>
	
	<script type="text/javascript" src="/recordings/jwmedia/jwplayer.js"></script>

	<script type="text/javascript">

		function formatpos (pos){
			//format seconds to MM:SS
			minutes = parseInt( pos / 60 ) % 60;
			seconds = pos % 60;
			return (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
		}

		function createsubchapter (chapterid, subchapterid, pos, tit) {
			chapter[chapterid][subchapterid] = new Array();
			chapter[chapterid][subchapterid]["position"] = pos;
			chapter[chapterid][subchapterid]["title"] = tit;
		}

		//Initialize 2 chapters
		var chapter = new Array(13);

		//Chapter 1 has 6 subchapters
		chapter[0] = new Array(6);
		createsubchapter(0, 0, 0, "Vorschau auf die Themen der Vorlesung");
		createsubchapter(0, 1, 22, "Gliederung");
		createsubchapter(0, 2, 95, "Netzwerke");
		createsubchapter(0, 3, 752, "Räume");
		createsubchapter(0, 4, 1714, "Netzwerk und Raum");
		createsubchapter(0, 5, 1751, "Wirklichkeit und Virtualität von Netzwerken und Räumen");

		//Chapter 2 has 5 subchapters
		chapter[1] = new Array(5);
		createsubchapter(1, 0, 0, "Vorschau auf die Themen der Vorlesung");
		createsubchapter(1, 1, 66, "Gliederung");
		createsubchapter(1, 2, 111, "Lehren und Lernen als Senden und Empfangen");
		createsubchapter(1, 3, 1347, "Vernetzung von Lehren und Lernen");
		createsubchapter(1, 4, 2557, "Kompatibilität");

		jwplayer("mediaplayer").setup({
        		'playlist': [{
	 	        	'file': 'http://download.hrz.tu-darmstadt.de/media/FB03/apaed/sesink-bri/bri_01.mp4', 
	  	        	'title': '1',
	  	        	'description': 'Technische Netzwerke und virtuelle Räume der Bildung'
                                },{
                                'file': 'http://download.hrz.tu-darmstadt.de/media/FB03/apaed/sesink-bri/bri_02.mp4', 
	  	        	'title': '2',
	  	        	'description': 'Die soziale Dimension von Bildung'
	     	  	}],
	     	  	"playlist.position": "right",
	     	  	"playlist.size": 150,
			'skin': '/recordings/jwmedia/skins/glow/glow.zip',
			'width': '100%',
			'height': '400px',
			'modes': [
				{type: 'html5'},
				{type: 'flash', src: '/recordings/jwmedia/player.swf'},
				{type: 'download'}
			]
		});

	jwplayer('mediaplayer').onPlaylistItem(function (obj) {
		//Update Subchapter-navigation
		title = document.getElementById('subchaptertitle');
		title.innerHTML = "Kapitel " + jwplayer('mediaplayer').getPlaylistItem().title + " - " + jwplayer('mediaplayer').getPlaylistItem().description;

		sublistcontent = "";
		chapter_number = parseInt(jwplayer('mediaplayer').getPlaylistItem().title);
		
		if (chapter_number < 10){
			chapter_2digit = "0" + chapter_number;
		}
		else{
			chapter_2digit = chapter_number;			
		}

		chapterpos = chapter_number-1;

		for (var i = 0; i < chapter[chapterpos].length; ++i){
			sublistcontent = sublistcontent + '<li><a href="#" onclick="seekAndPlay('+chapter[chapterpos][i]["position"]+'); return false;">' + chapter[chapterpos][i]["title"] + '</a> (' + formatpos(chapter[chapterpos][i]["position"]) + ')</li>';
		}

		sublist = document.getElementById('subchapterelements');
		sublist.innerHTML = sublistcontent;

		pdffile = document.getElementById('pdffile');
		pdffile.innerHTML = '<a target="_blank" href="http://download.hrz.tu-darmstadt.de/media/FB03/apaed/sesink-bri/bri_' + chapter_2digit + '.pdf">Folien zu Kapitel ' + chapter_number + ' als PDF herunterladen</a>';

	});

	function seekAndPlay(pos)
	      {
	            setTimeout(function()
	              {
   	             jwplayer().seek(pos).play(true);
   	           }, 0);
	      }

	</script>

	<!-- END OF THE PLAYER EMBEDDING -->

<div id="subchapter" style="margin-top: 20px;">

<h1 id="subchaptertitle">Titel</h1>

<h3>Unterkapitelnavigation</h3>

<ul id="subchapterelements">
</ul>

<p id="pdffile">
</p>

</div>