Interactive HTML5 Video

with Popcorn

Stoke your Fires

6 March 2015

Philo van Kemenade @phivk

Gilles Pradeau @LearningToCount


These Slides

Introducing Hyper Video

Exploring Hyper Video

with Popcorn Maker

Behind the Scenes with popcorn.js


Online Video as we know it

Online Video as we know it

  • Flat video format
  • Doesn't play along with a web page
  • Requires plugins

Like a picture of

some awesome text






 the Complex 

 the Changing 

 and the Indeterminate 

Let me introduce the word “hypertext” to mean a body of written or pictorial material interconnected in such a complex way that it could not conveniently be presented or represented on paper.

 Hyper Film 

Films, sound recordings, and video recordings are also linear strings, basically for mechanical reasons. But these, too, can now be arranged as non-linear systems—for instance, lattices—for editing purposes, or for display with different emphasis. [...] The hyperfilm—a browsable or vari-sequenced movie—is only one of the possible hypermedia that require our attention.

Hyper Video

Hyper Video

  • Hyperlinked elements
  • Dynamic
  • Open HTML5 Web Standard

Remix Culture


Have a look at this video

Let's make Some Popcorn

Go to


Share your story

Your last film:

your characters

your soundtrack


Get to know your neighbour

Favourite music video

Where from?


Demo Time


Popcorn Video has source code

              "START": 0,   
              "END": 148,    
              "TARGET": "VIDEO-CONTAINER",
              "SOURCE": [
				  "text": "\nTHAT COULD BE\n ",
				  "linkUrl": "",
				  "linkTarget": "_blank",
				  "position": "custom",
				  "alignment": "center",
				  "start": 3.503431239099997,
				  "end": 5.403431239099998,
				  "transition": "popcorn-fade",
				  "fontFamily": "Lato",
				  "fontSize": 10,
				  "fontColor": "#EEE",
				  "shadow": false,
				  "shadowColor": "#444444",
				  "background": true,
				  "backgroundColor": "#222",
				  "fontDecorations": {
				    "bold": false,
				    "italics": false

Behind the Scenes

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.

One millionth tower put webdocs on the map

Popcorn.js Examples

Know Your Exit by Robert R. Morris


Colour Tracker by A Navalla Suíza


Happy World by Cinquième étage & Upian


Semantic Remix by Rebellious Pixels


A Fighting Chance by

Shared Notepad:

Web 101


What's there?


How does it look?


What does it do?



Demos by - Berto Yanez


Video Template

Popcorn.js is also

on github

How <video> started out


Take aways

It's an exciting age to tell video stories on the web


Hyper video experiences are built in your browser from resources on the web


Popcorn.js makes video accessible in your browser


The web as platform offers boundless customizability


Thank you



Interactive HTML5 Video with Popcorn

By Philo van Kemenade

Interactive HTML5 Video with Popcorn

  • 2,590