<!DOCTYPE html>
<html>
<head>
<title>Styler Popcorn Demo</title>
<script src="../../popcorn.js"></script>
<script src="../footnote/popcorn.footnote.js"></script>
<script src="popcorn.styler.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var p = Popcorn('#video')
.play()
.footnote({
start: 5, // seconds
end: 15, // seconds
text: 'This video made exclusively for drumbeat.org',
target: 'footnotediv'
} )
.footnote({
start: 20, // seconds
end: 45, // seconds
text: 'Visit webmademovies.org for more details',
target: 'footnotediv'
} )
.styler({
start: 0, // seconds
end: 10, // seconds
color: 'Black',
target: 'footnotediv'
} )
.styler({
start: 10, // seconds
end: 20, // seconds
color: 'Blue',
target: 'footnotediv'
} )
.styler({
start: 20, // seconds
end: 30, // seconds
color: 'Red',
target: 'footnotediv'
} )
.styler({
start: 30, // seconds
end: 45, // seconds
color: 'Green',
target: 'footnotediv'
} )
}, false);
</script>
</head>
<body>
<h1 id="qunit-header">Popcorn Styler Plug-in Demo</h1>
<p> A footnote displaying This video made exclusively for drumbeat.org' will appear at 5 seconds and disappear at 15 seconds.</p>
<p> This footnote will be displayed in in black for 10 seconds then blue for 10 seconds.</p>
<p> A footnote displaying 'Visit webmademovies.org for more details' will appear at 20 seconds and disappear at 45 seconds.</p>
<p> This footnote will be displayed in in red for 10 seconds then green for 10 seconds.</p>
<div>
<video id='video'
controls preload='none'
width= '250px'
poster="../../test/poster.png">
<source id='mp4'
src="../../test/trailer.mp4"
type='video/mp4; codecs="avc1, mp4a"'>
<source id='ogv'
src="../../test/trailer.ogv"
type='video/ogg; codecs="theora, vorbis"'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
<div id="footnotediv" width="50%" height="50%">
</div>
</body>
</html>