Popcorn #710

by J. Albert Bowden

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="demo" controls src="http://carpeliam.github.com/kriegspieljs/lightning/video.high.m4v"> 
</video>


<div id="demo-notes"></div>

CSS

html{font-family:arial;}

JavaScript

var pop = Popcorn("#demo", {
  defaults: {
    footnote: {
      target: "demo-notes"
    }
  }
}), 

playbackData = [
{
  start: 7,
  end: 11,
  text: "Jack and Jill sign in"
}, 
{
  start: 11,
  end: 14,
  text: "Spectators can see both sides"
}, 
{
  start: 14,
  end: 18,
  text: "Once you choose a color, you can only see your side."
}, 
{
  start: 18,
  end: 24,
  text: "How are we going to play an entire game of chess? There's only 20 seconds left in this demo!"
}, 
{
  start: 24,
  end: 30,
  text: "A piece moved to an illegal square just floats back to its starting square (<a href='http://jqueryui.com/'>jQuery UI</a> drag+drop)"
}, 
{
  start: 31,
  end: 38,
  text: "Whenever a move is made, the current player's box flashes (<a href='http://www.w3.org/TR/css3-animations/'>CSS3 keyframe animation</a>)"
}, 
{
  start: 38,
  end: 46,
  text: "I have no way of knowing where my opponent's pieces are!"
}, 
{
  start: 42,
  end: 46,
  text: "*"
}, 
{
  start: 42,
  end: 46,
  text: "*There are actually a few ways to cheat. Shhh.",
  target: "small-notes"
}, 
{
  start: 46,
  end: 53,
  text: "Moves are validated on the client, then reported to the server and broadcasted to other clients via <a href='http://socket.io/'>socket.io</a>."
}, 
{
  start: 54,
  text: "Fool's mate. The client has callbacks for check and mate, and announces the winner/loser."
}
];

// Load in all footnotes
$.each( playbackData, function( i, data ) {
    pop.footnote( data );
});