Interactive video 

with popcorn

Gilles Pradeau

Philo van Kemenade



This presentation

Interactive Video
Popcorn Maker

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

interactive video

  • Selectable elements
  • Searchable
  • Remixable
  • Dynamic

Popcorn video has source code

              "START": 0,   
              "END": 148,    
              "TARGET": "VIDEO-CONTAINER",
              "SOURCE": [
                "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 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

Popcorn API 

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