Workshop: Popcorn Maker

BBC R&D | 12 June 2014

Philo van Kemenade @phivk

Today

Morning	Check in Introduction Workshop Brainstorm in teams
Afternoon	Stand up presentations Lunch Hacking Skype Ben Moskowitz Presentations Awards Check out

Human Stories

Online video

as we know it

Black Box Photo by AMagill

Like a picture

of some awesome text

Building Blocks

Demos by Berto Yañez

Hyper Video

Interactive

Modular

Remixable

Dynamic

Popcorn video has source code


        POPCORN.SEQUENCER({
              "START": 0,   
              "END": 148,    
              "TARGET": "VIDEO-CONTAINER",
              "SOURCE": [
                "HTTP://WWW.YOUTUBE.COM/WATCH?V=HCPTURV9WUM"],
              ...
              popcorn.twitter({
                "start": 26.71428571428571,
                "end": 33.03341,
                "target": "video-container",
                "left": 65,
                "top": 68.05555555555556,
                "search": "",
                "username": "@CaseyNeistat",
                "searchType": "recent",
                "numberOfTweets": "10",
                "transition": "popcorn-fade",
                "layout": "feed",
                "width": 35,
                "zindex": 999,
                "id": "TrackEvent3"
              });
              ...

Popcorn maker takes care of that

Popcorn.js

popcornjs.org

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web.

Popcorn.js Examples

Happy World by Cinquième étage & Upian

Know Your Exit by Robert R. Morris

Color tracker by @bertez

Coffee

share ideas + form teams

Challenge

"Pick a recent event and use Popcorn Maker to contextualize with media from the web"

First Mission

What experience do you aim to create?

Capture your brainstorm in wireframes

1 min stand up presentation per team

notes at

http://piratepad.net/popcorn-randd

Research Notes

Your experience with the tool

Limitations

Requirements from your perspective