Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 269 lines (236 sloc) 8.58 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GML + Popcorn.js</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--<script src="video.js" type="text/javascript" charset="utf-8"></script>-->
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="popcorn.js" type="text/javascript" charset="utf-8"></script>
<script src="popcorn.gml.js"></script>
<script src="popcorn.footnote.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
$('#video')
.draggable();
$('#chapters')
.draggable();
$('#chapterdiv')
.draggable();
$('#gmldiv')
.draggable();
var p = Popcorn('#video')
.play()
.gml({
start: 35, // seconds
endDrawing: 44,
end: 46, // seconds
gmltag: '29582',
target: 'gmldiv'
})
.gml({
start: 54, // seconds
endDrawing: 59,
end: 61, // seconds
gmltag: '29574',
target: 'gmldiv'
})
.gml({
start: 114, // seconds
endDrawing: 117,
end: 119,// seconds
gmltag: '29573',
target: 'gmldiv'
})
.gml({
start: 299, // seconds
endDrawing: 302,
end: 304, // seconds
gmltag: '29578',
target: 'gmldiv'
})
.gml({
start: 528, // seconds
endDrawing: 532,
end: 556, // seconds
gmltag: '29575',
target: 'gmldiv'
})
.gml({
start: 622, // seconds
endDrawing: 627,
end: 631, // seconds
gmltag: '29581',
target: 'gmldiv'
})
.gml({
start: 645, // seconds
endDrawing: 646,
end: 649, // seconds
gmltag: '29575',
target: 'gmldiv'
})
.gml({
start: 751, // seconds
endDrawing: 765,
end: 769, // seconds
gmltag: '94',
target: 'gmldiv'
})
.gml({
start: 780, // seconds
endDrawing: 782,
end: 784, // seconds
gmltag: '29580',
target: 'gmldiv'
})
.gml({
start: 796, // seconds
endDrawing: 802,
end: 802, // seconds
gmltag: '148',
target: 'gmldiv'
})
.gml({
start: 816, // seconds
endDrawing: 824,
end: 824, // seconds
gmltag: '21377',
target: 'gmldiv'
})
.gml({
start: 864, // seconds
endDrawing: 885,
end: 885, // seconds
gmltag: '29020',
target: 'gmldiv'
})
.gml({
start: 902, // seconds
endDrawing: 906,
end: 911, // seconds
gmltag: '29019',
target: 'gmldiv'
});
// generates table of contents for the "chapters" div
// chapters data
var chapters = [
{time: "00:00", title: "Opening Title Card"},
{time: "00:05", title: "Introduction to GML"},
{time: "01:04", title: "GML Project: Eyewriter"},
{time: "01:46", title: "Defining the need for open standards"},
{time: "03:05", title: "Graffiti Analysis: Capture"},
{time: "08:47", title: "Graffiti Analysis: Playback"},
{time: "10:02", title: "Graffiti Analysis: Sound and Architecture Settings"},
{time: "11:22", title: "GML Project: TEMPT vs Golan Levin"},
{time: "13:02", title: "GML Project: Obama Tag"},
{time: "13:20", title: "GML Project: Vienna POV Experiment"},
{time: "14:08", title: "GML Project: iPhone GML application"},
{time: "14:18", title: "Introduction to 000000book.com"},
{time: "15:11", title: "Spreading the word about open source culture"},
{time: "15:37", title: "End Title Card"}
],
footnotes = [
{time:"00:25.083", text:" http://vimeo.com/8072596"},
{time:"00:35.497", text:" http://vimeo.com/8072596"},
{time:"01:04.961", text:" http://www.eyewriter.org/"},
{time:"01:08.414", text:" http://vimeo.com/6376466"},
{time:"01:14.881", text:" http://www.alshopefoundation.org/"},
{time:"01:25.632", text:" http://vimeo.com/6376466"},
{time:"01:33.671", text:" http://vimeo.com/6376466"},
{time:"01:50.258", text:" http://vimeo.com/13327615"},
{time:"02:16.244", text:" http://vimeo.com/6376466"},
{time:"03:05.682", text:" http://www.graffitianalysis.com/"},
{time:"03:14.575", text:" http://www.graffitianalysis.com/downloads/"},
{time:"04:08.788", text:" http://www.graffitianalysis.com/how-to/"},
{time:"04:11.975", text:" http://vimeo.com/8438989"},
{time:"04:59.923", text:" http://vimeo.com/21270066"},
{time:"05:33.692", text:" http://vimeo.com/8438989"},
{time:"08:37.616", text:" http://vimeo.com/14098101"},
{time:"09:54.756", text:" http://vimeo.com/14098101"},
{time:"10:31.645", text:" http://vimeo.com/13327615"},
{time:"11:33.867", text:" http://vimeo.com/17264689"},
{time:"11:39.921", text:" http://www.graffitimarkuplanguage.com/"},
{time:"12:03.015", text:" http://www.graffitimarkuplanguage.com/robotic-graffiti-tagger/"},
{time:"12:28.420", text:" http://vimeo.com/8691659"},
{time:"12:55.348", text:" http://vimeo.com/14098101"},
{time:"13:02.481", text:" http://www.graffitimarkuplanguage.com/obama-gml-playa-post/"},
{time:"13:16.579", text:" http://vimeo.com/21270066"},
{time:"13:34.480", text:" (no known online source; from Evan's personal archive)"},
{time:"14:11.210", text:" http://vimeo.com/13327615"},
{time:"14:23.588", text:" http://000000book.com/"},
{time:"15:11.481", text:" http://vimeo.com/14098101"}
],
// div element of where to put chapters
chaptersContainer = document.getElementById( "chapters" ),
// video to seek to when chapter is clicked
video = document.getElementById( "video" ),
// converts 01:50.5 to 110.5
toSeconds = function(time) {
var t = time.split(":");
if (t.length === 1) {
return parseFloat(t[0], 10);
} else if (t.length === 2) {
return parseInt(t[0] * 60, 10) + parseFloat(t[1], 10);
}
};
// creates actual div element for each chapter
for ( var i = 0; i < chapters.length; i++ ) {
// create a chapter div element
var chapter = document.createElement( "a" );
// apply chapter details to created div
chapter.innerHTML = chapters[ i ].title;
chapter.href= "#";
chapter.addEventListener( "click", (function() {
// time is stored inside a closure
// keep it secret, keep it safe
var time = chapters[ i ].time;
return function() {
// seeks to the specified position of the video
video.currentTime = toSeconds( time );
video.play();
};
}()), false );
// appends chapter div to chapters div
chaptersContainer.appendChild( chapter );
chaptersContainer.appendChild( document.createElement( "br" ) );
// create a popcorn track of chapter
p.footnote({
start: toSeconds(chapters[ i ].time),
end: toSeconds( chapters[ i+1 ] && chapters[ i+1 ].time || "15:42" ),
target: "chapterdiv",
text: chapters[ i ].title + "<br>"
});
}
for ( var i = 0; i < footnotes.length; i++ ) {
// create a popcorn track of a link/footnote
p.footnote({
start: toSeconds(footnotes[ i ].time),
end: toSeconds( footnotes[ i+1 ] && footnotes[ i+1 ].time || "15:42" ),
target: "chapterdiv",
text: "<a onclick='document.getElementById(\"video\").pause();' target='_blank' href='" + footnotes[ i ].text + "'>" + footnotes[ i ].text + "</a>"
});
}
}, false);
</script>
</head>
<body>
<div id="chapters"></div>
<div id="chapterdiv"></div>
<div id="gmldiv"></div>
<video id="video" controls="controls" preload="auto">
<source
src="http://videos.mozilla.org/serv/webmademovies/gml.mp4"
type='video/mp4; codecs="avc1, mp4a"'>
<source
src="http://videos.mozilla.org/serv/webmademovies/gml.webm"
type='video/webm; codecs="vp8, vorbis"'>
<source
src="http://videos.mozilla.org/serv/webmademovies/gml.ogv"
type='video/webm; codecs="vp8, vorbis"'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</body>
</html>