Embed Size (px)
DESCRIPTION
A deep-dive into the HTML5 Media Framework Popcorn.js.
Citation preview
July 10, 2012
StoryCode Immersion #5
Popcorn.js Deep Dive
AGENDA
• Popcorn.js Overview - 45 Minutes
• Review Code Samples / Work on your own - 45 Minutes
• #storycode
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
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
PLAYERS
• Base Player - HTML5 Video Element
• Vimeo - Uses the Vimeo Player / Vimeo Video IDs
• YouTube - Use the YouTube Player / YouTube Video IDs
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
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
A CLOSER LOOK - THE HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>StoryCode | Popcorn Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="scripts/popcorn.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<section id="images">
</section>
<section id="videoPanel">
<div id="video" style="width:630px;height:472px;"></div>
</section>
<section id="tags">
</section>
</body>
</html>
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.
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/
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.
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.
OTHER EXAMPLES
http://www.storycode.org/immersions/popcorn/
popcorn_demo/index.htm
• Uses the Image, GoogleMaps, Twitter, GoogleFeed,
Wikipedia, Facebook, and Tagthisperson plugins.
http://popcornjs.org/code/demos/semantic_video/
• Pretty tricked out example of what is possible with
Popcorn.
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
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
CONTACT
www.storycode.org
@storycodeorg
