• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
StoryCode Immersion #5 - Popcorn.JS Deep Dive

StoryCode Immersion #5 - Popcorn.JS Deep Dive



A deep-dive into the HTML5 Media Framework Popcorn.js.

A deep-dive into the HTML5 Media Framework Popcorn.js.



Total Views
Views on SlideShare
Embed Views



9 Embeds 407

http://socialcoding4good.github.com 183
http://socialcoding4good.github.io 92
http://dosu.github.com 69
http://www.ow2.org 15
http://localhost 14 12
http://dosu.github.io 9
http://dpg.se 7
http://ernie.sg 6


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

    • 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