StoryCode Immersion #5 - Popcorn.JS Deep Dive

July 10, 2012StoryCode 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.JSvar 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.JSpop.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 EXAMPLEShttp://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

CONTACTmike@storycode.orgaina@storycode.orgwww.storycode.org @storycodeorg

http://socialcoding4good.github.com	183
http://dosu.github.com	69
http://socialcoding4good.github.io	18
http://www.ow2.org	14
http://localhost	8
http://ernie.sg	6

StoryCode Immersion #5 - Popcorn.JS Deep Dive

by storycode on Jul 09, 2012

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 298

Statistics

StoryCode Immersion #5 - Popcorn.JS Deep Dive Presentation Transcript