Popcorn.js is a JavaScript framework that allows for synchronizing HTML5 media like video and audio with interactive elements on a webpage, making media the "conductor" of an experience. It provides a plugin system and normalizes media properties and events to provide an easy API for building interactive narratives. The document outlines how Popcorn.js works, provides examples of plugins and sample code, and gives resources for learning more about developing with the framework.
3. OVERVIEW
โข Popcorn makes video work like the web - an event
system for HTML5 media.
โข jQuery for video/audio
โข Use video, audio and other media to control elements of
a webpage
โข Media becomes the โconductorโ of interactive
experiences
โข HTML5 Media Framework - written in Javascript
โข Created by Mozilla - still very much in development
4. POPCORN.JS FRAMEWORK
โข Uses HTMLMediaElement properties, methods, and
events
โข Properties - like autoplay, buffered, controls
โข Methods - like play(), pause(), load()
โข Events - like ended, stalled,
โข Normalizes them into an easy to learn API
โข Simple Plugin system for extensibility
5. PLAYERS
โข Base Player - HTML5 Video Element
โข Vimeo - Uses the Vimeo Player / Vimeo Video IDs
โข YouTube - Use the YouTube Player / YouTube Video IDs
6. PLUGINS
โข Plugins add additional functionality to Popcorn video
โข Highlights include:
Attribution, Code, Facebook, Flickr, GoogleFeed,
GoogleMap, Image, LinkedIn, Pause, Subtitle,
Tagthisperson, Timeline, Tumblr, Twitter, Webpage, and
Wikipedia,
โข Pretty simple to create your own
7. SAMPLE
โข Time-based animations conducted by the video - using a
YouTube Video and the Image and Tagthisperson
plugins.
โข http://www.storycode.org/immersions/popcorn/
popcorn_simple_demo/index.htm
โข Download for your own use:
http://www.storycode.org/immersions/popcorn/
popcorn_simple_demo.zip
9. A CLOSER LOOK - THE FILES
<link rel="stylesheet" href="css/style.css">
โข Our CSS file that controls the layout of the three
โsectionsโ (images, videoPanel, and tags).
<script src="scripts/popcorn.js"></script>
โข This is the core popcorn.js file that contains the popcorn media
framework. Unless you are doing heavy customizing you wonโt
need to edit this.
<script src="scripts/script.js"></script>
โข This is the custom javascript file that is specific to our demo.
10. A CLOSER LOOK
<script src="scripts/popcorn.js"></script>
โข You can use just the core or the fully loaded Popcorn.js
(includes modules, effects, plugins, players, parsers, etc).
Alternatively, you can create your own Popcorn.js script
using build tool (http://mozillapopcorn.org/build-tool/).
โข All Popcorn.js code is available in both production
(minified) and development (source) form - http://
mozillapopcorn.org/popcornjs/
11. A CLOSER LOOK - SCRIPT.JS
var pop = Popcorn.youtube( "#video", "http://www.youtube.com/watch?
v=sFqBp3rfTTc", { pauseOnLinkClicked: true } );
โข This instantiates a Popcorn object loading the YouTube Video in my #video Div. The
final parameter pauses the video if a link is clicked.
pop.image({
start: 1,
end: 10,
target: 'images',
href: 'http://www.gbv.com/',
src: 'img/pic1.jpg'
});
โข This is the format for the images that get spawned by the video. This image is
displayed in the โimagesโ section from 1 second to 10 seconds. It links to the
specified URL.
โข Check out the subsequent images that are spawned and their timing.
12. A CLOSER LOOK - SCRIPT.JS
pop.tagthisperson({
start: 5,
target: 'tags',
person: 'Guided By Voices',
href: 'http://www.gbv.com/'
});
โข This is the format for the โtagsโ that get spawned by the video.
This tag is displayed in the โtagsโ section at 5 seconds. It links to
the specified URL.
โข Check out the subsequent tags that are spawned and their timing.
pop.play();
โข Finally we call the play() method which auto-plays the video after
the page loads.
14. HINTS
โข When downloading something from Mozilla - use a
Mozilla browser like Firefox
โข Not always easy to edit locally, you may need to develop
on a web server if you are doing anything that is
somewhat advanced
15. RESOURCES
โข popcornjs.org - the hub for all information -
documentation, plugins, demos, community, downloads
โข mozillapopcorn.org - includes Popcorn Maker - an online
authoring environment (can be buggy)
โข Popcorn on Twitter - @popcornjs
