Start creating

Interactive Video


5 August 2014

Philo van Kemenade

@phivk

#interactivevideo

These Slides




http://phivk.neocities.org/interactivevideo

Hello


I analyze video interaction at

I organise

Today


Building Blocks
Interactive Video
Making Popcorn
Demos
Popcorn.js
Community

Building Blocks

HTML

What's there?

CSS

How does it look?

JavaScript

What does it do?

Demos by - Berto Yanez



 Online video

 as we know it 



 Black Box Photo by AMagill 




 Cat in a box 

Online Video as we know it



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




 Like a picture 


 of some awesome text 









 a Shifting Medium 



 Two Dansers  Matisse 





 Hyper Video 





 Happier Cats 

interactive video



  • Hyperlinked elements
  • HTML5 Web Standard
  • Remixable
  • Dynamic









 Interactive 


Cat Cizek - A Short History of the Highrise








 Dynamic 


 www.takethislollipop.com - I Dare You 









 Layered 


 Storygami & AJE - Indian Hospital 








 Participatory 


 Do Not Touch - Crowd-sourced music video






 Authoring Tools 




Have a look at this video...

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

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

Popcorn maker takes care of that


time line, media clips, events & event attributes 

Let's make some Popcorn!


Go to popcorn.webmaker.org

Get to know your neighbour

Favourite music video

Where from?

Hobbies

Share your story

Your company

Your passion

... (surprise us!)

Demo Time

Popcorn.js

popcornjs.org

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


Colour Tracker by A Navalla Suíza

Happy World by Cinquième étage & Upian

Know Your Exit by Robert R. Morris

POPCORN API


http://popcornjs.org/popcorn-docs/

Questions?

Community


popathon.org
@storygami



 Thank you