Interactive Filmmaking 101 -Popcorn

Sheffield DocFest

June 2015

Philo van Kemenade @phivk

Popcorn.js is an

HTML5 Media Framework

HTML

CSS

JavaScript

what's here?

how does it look?

what does it do?

It makes video play nicely with the rest of your website

Web Video before HTML5

HTML

video

+





 Filmmaking is a bit like sculpting 


 WebMaking is more like lego 





Venus de Milo  by  dm_meister

Launched by Mozilla along with Kat Cizek's 1 Millionth Tower

in 2011

// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#ourvideo");

// add a footnote at 2 seconds, and remove it at 6 seconds
pop.footnote({
    start: 2,
    end: 6,
    text: "Pop!",
    target: "footnotediv"
});

Using popcorn.js = writing JavaScript

Popcorn Maker lets you create popcorn powered video by pointing & clicking

...but it's more aimed at teenagers than filmmakers

Truly unique web docs are made of:

 

HTML, CSS, JS

functional content

a fascinating narrative

a multidisciplinary team

DocFest Interactive Filmmaking Panel

By Philo van Kemenade

DocFest Interactive Filmmaking Panel

Looking at Popcorn at the Sheffield DocFest Interactive Filmmaking Panel

  • 2,152