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
