Slides controls, press:

• ← and → to move around.
• Ctrl/Command and + or - to zoom in and out if slides don’t fit.
• T to change the theme.
• H to toggle syntax highlight.

• 1991 QuickTime 1.0 (Macintosh II, System 6)
• 1995 RealPlayer (Streaming Video To The Web)
• 1995 JavaScript (http://gul.ly/hr)
• 1996 Flash
• 2000 Real, QuickTime, Windows Media Player
• 2002 Flash MX(6) Video, Sorenson Spark
• 2003 Flash External FLV, VP6 codec
• 2005 YouTube ("Me At The Zoo", April 23rd 2005)
• 2008 HTML5 Video (http://gul.ly/101)

• Envisioned By Brett Gaylor, Web Made Movies
• Given life by CDOT* at Seneca College, Toronto

• 2010 0.1, Web Made Movies Proof of Concept
• 2011 0.2, 100% Re-written as framework
• 2011 0.3, Major Plugin Release
• 2011 0.4, Supports Youtube & Vimeo Api
• 2011 0.5, Subtitle Overhaul & Composable Plugins

• All commands included in core
• Single execution, ran on DOM ready
• A proof of concept

• Reduce core to a framework
• Plugin API
  • Commands
  • Data Loading Parsers
  • Player Engines
• Extensive Test Suite

Think about jQuery's stories...

• Write less, do more.*
• Find things, do stuff.

This is Popcorn.js's story...

• A video
• Does something
• At a time
• With some information

A video...Does Something...At a time...With some information

// Think something like...
aVideo.doesSomething({  at this time, with this information });

Evolved into...

// A Popcorn Video Object...
Popcorn("#video-id");

// ... does something, at this time, with this information
Popcorn("#video-id").doSomething({
  start: 0,
  end: 4,
  info: "..."
});

This design makes Popcorn REALLY easy to extend...

• play(), pause()
• ...Are still play(), pause()
• currentTime, volume, playbackRate
• ...Becomes currentTime(), volume(), playbackRate()
• Never extend the native.
• Always return a Popcorn video object.

var $pop = Popcorn("#an-id-selector");

{
  data: {
    events: {},     // Event handler data
    trackEvents: {
      //  Array index corresponds to an integer
      //  ...which corresponds to a whole second
      byEnd: [],    // Queue of end functions (runs first)
      byStart: []   // Queue of start functions
    }
  },

  video: [object HTMLVideoElement],

  __proto__: {

    /*
      Methods...
      load, play, pause, currentTime, playbackRate, mute, volume,
      roundTime, exec, trigger, listen, unlisten, getTrackEvents,
      removeTrackEvent, removePlugin
    */
  }
}

var $pop = Popcorn("#tron");

$pop.listen( "ended", function() {

  //  Show YouTube-like "Related Videos" screen
  this.related({
    list: [
      "Tron",
      "Matrix",
      "Hackers"
    ]
  });
}).exec( 4, function() {

  this.pause();

  if ( confirm("Wanna see more?") ) {

    this.play();

  } else {

    this.currentTime(

      this.duration() - 2

    ).play();
  }
});

var $pop = Popcorn("#video");

$pop.wikipedia({
  start: 6,
  end: 15,
  target: "output",
  numberofwords: 150,
  src: "http://en.wikipedia.org/wiki/Brendan_Eich"
});

[{
    "image":  {
      "start": 0,
      "end": 2,
      "src":"src/json160.gif"
    }
  },
  {
    "footnote": {
      "start": 0,
      "end": 2,
      "text":"I invented JSON"
    }
  },
  {
    "image":  {
      "start": 2,
      "end": 10,
      "src":"src/jslint.gif"
    }
  },
  {
    "footnote": {
      "start": 2,
      "end": 10,
      "text":"I wrote JSLint"
    }
  }
]

  <video id="crock-video" data-timeline-sources="playback.json">
    <source src="src/crockford.ogv" type="video/ogg;" />
  </video>

Popcorn(
  Popcorn.youtube( "whiplash", "http://www.youtube.com/watch?v=BYNoQZ5djUA" )
);

//   Add a few commands with the footnote plugin...