Getting started with

Interactive Video

12 January 2015

Philo van Kemenade

@phivk

#interactivevideo

These Slides

Hello

I analyze video interaction at

I organise storytelling hackathons at

I tweet @phivk

Interactive Video

Making it

Behind the scenes

Today

Web 101

HTML

What's there?

CSS

How does it look?

JavaScript

What does it do?

 

 

Demos by - Berto Yanez

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

Hyper Video

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

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.

Popcorn.js Examples

Know Your Exit by Robert R. Morris

 

Colour Tracker by A Navalla Suíza

 

Happy World by Cinquième étage & Upian

Take aways

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

 

Video Interaction

 

Different authouring tools

 

Interactivity around video with Popcorn Maker

Questions?

Community

Thank you

@phivk

Tools & Projects

Getting started with Interactive Video

By Philo van Kemenade

Getting started with Interactive Video

  • 2,220
Loading comments...

More from Philo van Kemenade