
Popcorn.js: The HTML5 Video Framework - creativityhurts
http://popcornjs.org/
======
randall
Anyone who's interested in popcorn might want to give my little tech demo a
spin. Works with YouTube right now, but enables syncing of website slides to a
YouTube video.

For now, this is just a tech demo (creation isn't done yet) but would love any
feedback you've got about the frontend, or if you see any use, etc. Going to
launch it in a few weeks, which is when I'll really start looking for feedback
on both the creation and consumption side. (post to HN, etc)

<http://www.vidpresso.tv/presentations/view/5>

[Watch more than 10 seconds, or click around on the timecodes in the rundown
to get an idea of what I've built.]

~~~
jswinghammer
If you sync it with PowerPoint slides then you might have something. Could be
a sales video with a slide deck moving along while the dude talks. Might be
cool. A few companies do something similar but not quite that.

~~~
randall
Yeah, the plan is to do SlideShare and PDF viewers (scribd, crocodoc) soon
enough, before launch.

------
aridiculous
I'm really excited for the coming collision of motion graphics, video, and
web.

Things like Popcorn.js, CSS3, OpenGL, and AJAX are going to bring dynamic,
user-controlled motion graphics into the browser without actionscript. Huzzah!

~~~
franze
well that, and beyond i.e.: <http://www.barbafan.de/html5video?video=tron>

------
fleitz
This is great. Does anyone know if it's possible to record video using HTML5?
I'm looking for a drop in component that will let a person easily record a
video from their webcam and am trying to avoid flash.

~~~
bkrausz
We had to look into this: the only way to do it in a cross-browser/OS way is
to use Flash. Fortunately, it's fairly simple to write a bare-bones Flash app
that just creates JS hooks for all webcam functions (though the permission
dialog and any video preview still needs to be in the Flash window).

~~~
fleitz
Awesome, I'll have to look into that, are you grabbing video or just images?

~~~
bkrausz
We stream video: you can use a Flash media server (costs a lot of money),
Wowza media server (costs less money), or red5 (open source) to stream. For
images you can actually extract a bitmap from a frame of the video, which I
imagine you can pass to JS and reassemble in canvas.

~~~
andrewacove
Is there any good documentation for setting up red5? My first attempt was a
nightmare.

~~~
bkrausz
We just used Wowza, since they had an EC2 instance you could just boot up at a
higher cost than a regular EC2 instance. The documentation is ok, not amazing,
but getting it running is pretty trivial thanks to their examples.

------
lux
Looks neat! Gonna check it out this weekend.

Plug: I have a similar project for interactive video with HTML5 I just put
online the other day:

<http://www.cacophonyjs.com/>

~~~
randall
Reminds me of that crazy Arcade Fire video.

<http://www.thewildernessdowntown.com/>

~~~
lux
Definitely inspired by it :)

I'm working with a friend to make an interactive music video with it, story-
based with some mouse-reacting visual elements and some minor social
interaction too.

------
reustle
I remember talking about this at Mozilla Drumbeat NYC last year. It's a very
cool project, indeed.

------
foenix
This is fabulous. I might even say that this medium is going to inspire new
genres of digital art.

Bravo.

~~~
chopsueyar
I don't know about inspiring new genres, unless the end user-experience of
this is something that could never be created in Flash (a streaming VOD that
triggers javascript at specific video frames/times to update portions of the
DOM).

I would like to see this used in an interactive, bi-directional manner. That
would be some interesting stuff.

------
sylvinus
This seems much inferior to <http://mediaelementjs.com>

~~~
elliottcarlson
At all no - mediaelementjs offers excellent skinning, but it's the events and
triggers that make popcornjs far more powerful. This:
<http://www.rebelliouspixels.com/semanticremix/> was posted on HN not that
long ago and is an excellent example of the power of popcornjs.

~~~
chopsueyar
This is the xml file used for that Donald Duck mashup. Reading through the
timeline tag really made more sense to me than the actual demo (in terms of
explanation).

<http://www.rebelliouspixels.com/semanticremix/data.xml>

------
argoneus
Does anyone know what the song/melody playing in the background of the video
is from?

~~~
tomstuart
<http://en.wikipedia.org/wiki/Popcorn_(instrumental)>

~~~
argoneus
Thanks, and it's very apropos they would choose that song. The melody has been
stuck in my head for years, probably from some old school 8-bit video game, so
it's great to match the song with the melody.

------
taitems
Wow, thanks for using the 'Aristo' jQuery UI theme for the Butter creation
tool :)

~~~
rwaldron
Thanks for making the Aristo theme for jQuery UI (and you're welcome) :)

------
doctororange
That's wonderful! The syntax is beautifully simple too.

~~~
rwaldron
:D Glad you like it!

