Skip to content
This repository has been archived by the owner before Nov 9, 2022. It is now read-only.
Browse files
Merge branch '313' into 0.3
  • Loading branch information
annasob committed Feb 8, 2011
2 parents f7c3586 + 3e17cab commit d9075f481eda99d8bc3b16f44a04744004963fa6
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 207 deletions.
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<title>Popcorn Simple Demo</title>
<!-- You muct include the popcorn.js file. Ensure the path is correct -->
<script src="popcorn.js"></script>

<!-- You must include each plug-in needed for the demo individually. Ensure the path is correct -->
<!-- Footnote Plugin -->
<script src="plugins/footnote/popcorn.footnote.js"></script>
<!-- Subtitle Plugin -->
<script src="plugins/subtitle/popcorn.subtitle.js"></script>

<!-- Link popcorn-js to the video by uing the id of the video element -->
<!-- You need to tell popcorn when you want each plugin to execute -->
// wait for DOM to load
document.addEventListener('DOMContentLoaded', function () {
// popcorn events are chainable this means that you can also do:
//; or p.footnote{};
// Make a popcorn instance, passing the id of the video element.
// notice the <video id='video' ... > at the bottom of the page.
var p = Popcorn('#video')
// use the footnote plugin
// notice the <div id='footnotediv'> tag at the bottom of the page
start: 0, // seconds
end: 15, // seconds
text: 'This video made exclusively for',
target: 'footnotediv'
} )
// use the subtitle plugin
start: 1, // seconds
end: 15, // seconds
text: 'this is a subtitle'
} )
// make the video play automatically
}, false);

<h1>Popcorn Simple Demo</h1>
<p>You should see a footnote "This video made exclusively for" appear right away</p>
<p>You should see a subtitle "this is a subtitle" appear at 1 sec away</p>
<!-- You need a video element with an id -->
<video id='video'
width= '250px'
<source id='mp4'
type='video/mp4; codecs="avc1, mp4a"'>
<source id='ogv'
type='video/ogg; codecs="theora, vorbis"'>
<p>Your user agent does not support the HTML5 Video element.</p>
<!-- this is needed for the footnote plugin -->
<div id="footnotediv"></div>

This file was deleted.

This file was deleted.

0 comments on commit d9075f4

Please sign in to comment.