Popcorn.js Annotation of Video II
HTML
<script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script>
<table>
<tr>
<td><video src="http://upload.wikimedia.org/wikipedia/commons/a/ac/P2puvid.ogv" controls id="vid"></video></td>
</tr>
</table>
CSS
table {
border-collapse: separate;
border-spacing: 5px;
}
table tr td {
padding: 5px;
}
video {
width: 480px;
height: 360px;
}
JavaScript
var popcorn = Popcorn("#vid").play();
popcorn.exec(1, function() {
mydiv.html('<b>The Current Model Of Higher Education Is Broken!</b>');
});
//$("#video").get(0).ontimeupdate = function(e) {
// alert("foo");
//};
popcorn.exec(8, function() {
mydiv.html('<b>The Model Does Not Scale!</b>');
});
popcorn.exec(22, function() {
mydiv.html('<b>Keep Learning For Rest Of Our Lives!</b>');
});
popcorn.exec(37, function() {
mydiv.html('<b>Cost Too High!</b>');
});
popcorn.exec(47, function() {
mydiv.html('<b>P2PU Recognition of Learning</b>');
});
popcorn.exec(50, function() {
mydiv.html('<b>Lots Of Demand!</b>');
});
popcorn.exec(65, function() {
mydiv.html('<b>Enter P2PU!</b>');
});
popcorn.exec(70, function() {
mydiv.html('<b>Yada, Yada, Yada!</b>');
});
popcorn.exec(75, function() {
mydiv.html('<img src="http://communicationleadership.usc.edu/images/strangelove.gif" width="100%" height="100%"/>');
});
popcorn.exec(78, function() {
mydiv.html('<img src="http://www.kyushu-ns.ac.jp/~allan/Assets/Un%20Chien%20Andalou/44%20ant%20hand%20door.jpg" width="100%" height="100%"/>');
});
popcorn.exec(81, function() {
mydiv.html('<img src="http://www.officialrepostore.com/reposhop09/images/REPO_3932.jpg" width="100%" height="100%"/>');
});
popcorn.exec(84, function() {
mydiv.html('<h1>Pop Quiz</h1>Where can you recieve a grant for your talents?<br/><br/><input type="radio" name="quesiton">Institute of Silly Walks<br/><input type="radio" name="quesiton">Board of Silly Walks<br/><input type="radio" name="quesiton">League of Silly Walks<br/><input type="radio" name="quesiton">Ministry of Silly Walks<br/><input type="radio" name="quesiton">Ministry of Coconuts<br/>');
});
popcorn.exec(86, function() {
mydiv.html('<iframe frameborder="no" height="100%" id="myiframe" src="http://metameso.org:9001/mourf" width="100%"></iframe>');
});
popcorn.exec(93, function() {
mydiv.html('');
});
popcorn.wikipedia({
...