StoryCode Immersion #5 - Popcorn.JS Deep Dive

2,342 views
2,251 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,342
On SlideShare
0
From Embeds
0
Number of Embeds
388
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
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.• 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
  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 (http://mozillapopcorn.org/build-tool/).• All Popcorn.js code is available in both production (minified) and development (source) form - http:// mozillapopcorn.org/popcornjs/
  11. 11. 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.
  12. 12. 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.
  13. 13. 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.
  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• 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
  16. 16. CONTACTmike@storycode.orgaina@storycode.orgwww.storycode.org @storycodeorg

×