Case Study Popcorn.js
Imagine Video playing in your web browser. Now imagine that the footage is interactive, time based, and literally jumping out of the video frame: you can build this kind of experience with popcorn.js.
One Millionth Tower Case Study
One Millionth Tower is a story with global implications about how, with the power of imagination, we can transform the urban and virtual spaces that belong to all of us.
One Millionth Tower is a "hyper-local" documentary focusing on a particular community: the highrise on Kipling Avenue in suburban Toronto, Canada. The project was established in collaboration between community members, architects, documentary filmmakers, and animators.
Additional Features include:
- a behind-the-scenes documentary about the collaborative process
- a short documentary featuring international examples of tower revitalization
- a short documentary exploring the open technology used to create the project
- and an interactive feature that takes you to highrise neighbourhoods in more than 200 countries in the world, thanks to Google Streetview and satellite imagery.
What are the elements that create this new experience make this work?
Popcorn.js - Check out the code: https://github.com/m4robb/one-millionth-tower
The experiences are now dynamic, real time with interactive buttons, forms, and twitter feeds. Expanding Video - Beyond the frame, expanding outside the frame of the video shot.
HTML5 - custom alpha channel library for HTML5 video was used to composite the video assets seamlessly over top of 3D planes within the environment.
Open video and audio formats (WebM and OGG)
XPath - XML language to parse data from a Google Docs Spreadsheet in order to ingest the Google Map coordinates. And XMLHttpRequest (XHR) was used for monitoring the download progress of all the assets / pre-caching.
Yahoo's Weather Services API - to pull in real-time weather data.
Q. Where can I download the latest stable release code of Popcorn.js?
A. The latest stable releases code is always available here: Popcorn.js Minified Popcorn.js Complete (Core, Plugins, Players & Parsers Included)
Q. Where can I find the latest development code?
A. The latest development code can be found on Github
Q. How do I create a plugin?
A. For a step-by-step guide, visit Getting Started with Popcorn.js Plugins