Interactive HTML5 Video

with Popcorn

Stoke your Fires

5 February 2015

Philo van Kemenade @phivk

Gilles Pradeau @LearningToCount

#interactivevideo

These Slides

slides.com/phivk/popcornvideo/

Introducing Hyper Video

Exploring Hyper Video

with Popcorn Maker

Behind the Scenes with popcorn.js

Today

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

Hyper Video

Hyperlinked elements
Dynamic
Open HTML5 Web Standard

Remix Culture

Text

https://phillchill.makes.org/popcorn/26vr

Have a look at this video

Let's make Some Popcorn

Go to popcorn.webmaker.org

Share your story

Your last film:

your characters

your soundtrack

...

Get to know your neighbour

Favourite music video

Where from?

Hobbies?

Stop!
Demo Time

Text

Popcorn Video has source code

POPCORN.SEQUENCER({
              "START": 0,   
              "END": 148,    
              "TARGET": "VIDEO-CONTAINER",
              "SOURCE": [
                "http://www.youtube.com/watch?v=G74hB4Ybim4"],
              ...
              popcorn.text({
				  "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.

popcornjs.org