Interactive video 

with popcorn

Gilles Pradeau

Philo van Kemenade

@phivk

#popcornjs

This presentation


Interactive Video
Popcorn Maker
Demos
Popcorn.js
Community

Online Video as we know it


Black Box Video

is a lot like a photo of some awesome text

Online Video as we know it



  • No Selectable elements
  • Not Searchable
  • Not Remixable
  • Static

Interactive Video


pragmatic Two-Sided definition:


' viewers ' influence their experience

video pulls in elements from the web


Interactive video

http://popcorn.webmadecontent.org/qsx

interactive video



  • Selectable elements
  • Searchable
  • 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

time line, media clips, events & event attributes 

Let's make some Popcorn!



'Start a project'

Let's pop in a video of a recent event

and make it interactive!

Demo Time

Popcorn.js


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.

Example projects

Getting started

http://popcornjs.org/popcorn-101


Popcorn API

http://popcornjs.org/popcorn-docs/ 

Where do we go from here?


Interactive video with Popcorn

By Philo van Kemenade

Interactive video with Popcorn

A workshop about making interactive video with Popcorn Maker and Popcorn.js

  • 3,534
Loading comments...

More from Philo van Kemenade