Getting started with

Interactive Video

12 January 2015

Philo van Kemenade

@phivk

#interactivevideo

These Slides

slides.com/phivk/interactivevideo

Hello

I analyze video interaction at

I organise storytelling hackathons at

I tweet @phivk

Interactive Video

Making it

Behind the scenes

Today

Web 101

Online Video as we know it

Cat in a box

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

Happier Cats

Hyper Video

Hyperlinked elements
Dynamic
Open HTML5 Web Standard

Video isn't interactive

a little secret...

(By itself)

Before / after

In

Around

Video interaction

Jason Zada - Take this Lollipop

Studio Moniker - Do Not Touch

Martin Percy - Lifesaver

Virgin Media & Storygami - On the Line 2

Storygami & AJE - Indian Hospital

Authoring Tools

Text

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

Have a look at this video

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
				},
              ...

Text

Popcorn Maker takes care of that

Let's make Some Popcorn

Go to popcorn.webmaker.org

Share your story

Your company

Your passion

... (surprise us!)

Get to know your neighbour

Favourite music video

Where from?

Hobbies

Stop!
Demo Time

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