Interactive video
with popcorn
Gilles Pradeau
Philo van Kemenade
@phivk
#popcornjs
This presentation
Interactive Video
Popcorn Maker
Demos
Popcorn.js
Community
Online Video as we know it
Online Video as we know it
-
No Selectable elements
- Not Searchable
- Not Remixable
- Static
Interactive Video
pragmatic Two-Sided definition:
' viewers ' influence their experience
video pulls in elements from the web
Interactive video
http://popcorn.webmadecontent.org/qsx
interactive video
-
Selectable elements
- Searchable
- Remixable
- Dynamic
Popcorn video has source code
POPCORN.SEQUENCER({
"START": 0,
"END": 148,
"TARGET": "VIDEO-CONTAINER",
"SOURCE": [
"HTTP://WWW.YOUTUBE.COM/WATCH?V=HCPTURV9WUM"],
...
popcorn.twitter({
"start": 26.71428571428571,
"end": 33.03341,
"target": "video-container",
"left": 65,
"top": 68.05555555555556,
"search": "",
"username": "@CaseyNeistat",
"searchType": "recent",
"numberOfTweets": "10",
"transition": "popcorn-fade",
"layout": "feed",
"width": 35,
"zindex": 999,
"id": "TrackEvent3"
});
...
Popcorn maker takes care of that
time line, media clips, events & event attributes
Let's make some Popcorn!
Go to popcorn.webmaker.org
'Start a project'
Let's pop in a video of a recent event
and make it interactive!
Demo Time
Popcorn.js
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.
Example projects
- http://livingdocs.org/amir-bar-lev-intro-to-tillman-story-interactive/
- http://sports.newsday.com/long-island/boxing/a-fighting-chance/?video=the-gym
- http://connect2campus.in/slides/try2.html
- http://studio.sketchpad.cc/sp/pad/view/ro.9KPxftbkKN$2Z/latest?soundcloud_url=http://soundcloud.com/aribadernatal/sketchcast_1342117029538
-
http://asciifi.com/
-
http://www.robmorrismusic.com/knowyourexit/
Getting started
http://popcornjs.org/popcorn-101