StoryCode Immersion #5 - Popcorn.JS Deep Dive


Published on

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

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

StoryCode Immersion #5 - Popcorn.JS Deep Dive

  1. 1. July 10, 2012StoryCode Immersion #5 Popcorn.js Deep Dive
  2. 2. AGENDA• Popcorn.js Overview - 45 Minutes• Review Code Samples / Work on your own - 45 Minutes• #storycode
  3. 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. 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. 5. PLAYERS• Base Player - HTML5 Video Element• Vimeo - Uses the Vimeo Player / Vimeo Video IDs• YouTube - Use the YouTube Player / YouTube Video IDs
  6. 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. 7. SAMPLE• Time-based animations conducted by the video - using a YouTube Video and the Image and Tagthisperson plugins.• popcorn_simple_demo/index.htm• Download for your own use:
  8. 8. 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>
  9. 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. 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 (• All Popcorn.js code is available in both production (minified) and development (source) form - http://
  11. 11. A CLOSER LOOK - SCRIPT.JSvar pop = "#video", "", { 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:, 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. 12. A CLOSER LOOK - SCRIPT.JSpop.tagthisperson({ start: 5, target: tags, person: Guided By Voices, href:});• 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;• Finally we call the play() method which auto-plays the video after the page loads.
  13. 13. OTHER EXAMPLES• Uses the Image, GoogleMaps, Twitter, GoogleFeed, Wikipedia, Facebook, and Tagthisperson plugins.• Pretty tricked out example of what is possible with Popcorn.
  14. 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. 15. RESOURCES• - the hub for all information - documentation, plugins, demos, community, downloads• - includes Popcorn Maker - an online authoring environment (can be buggy)• Popcorn on Twitter - @popcornjs
  16. 16. @storycodeorg