6 ms·
Popcorn.js: The HTML5 Video Framework
- reustle 16y agoI remember talking about this at Mozilla Drumbeat NYC last year. It's a very cool project, indeed.
- aridiculous 16y agoI'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 16y agowell that, and beyond i.e.: http://www.barbafan.de/html5video?video=tron http://www.barbafan.de/html5video?video=tron
- fleitz 16y agoThis 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.
- mikaelgramont 16y agoDoes not exist yet. There's no final spec for this, and Opera just started experimenting with it. http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview http://my.opera.com/core/blog/2011/03/23/webcam-orientation-...
- bkrausz 16y agoWe 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 16y agoAwesome, I'll have to look into that, are you grabbing video or just images?
- bkrausz 16y agoWe 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 16y agoIs there any good documentation for setting up red5? My first attempt was a nightmare.
- bkrausz 16y agoWe 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.
- chopsueyar 16y agoYou can use a developer's version of Wowza (the big limit is iPhone streaming is crippled). A single license is like $1000, but you can instead pay by month ($60, IIRC). Wowza also has a deal with Amazon, so you can run Wowza on EC2 and only pay by the hour (Wowza licensing included).
- chopsueyar 16y agoHave you been able to use Wowza with HTML5 using a livestream, not VOD?
- sylvinus 16y agoThis seems much inferior to http://mediaelementjs.com http://mediaelementjs.com
- elliottcarlson 16y agoAt 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/ http://www.rebelliouspixels.com/semanticremix/ was posted on HN not that long ago and is an excellent example of the power of popcornjs.
- chopsueyar 16y agoThis 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 http://www.rebelliouspixels.com/semanticremix/data.xml
- rwaldron 16y agoThey can be friends and work together, bro!
- randall 16y agoAnyone 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 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.]
- lurchpop 16y agocrazy. i did something similar with a shopping cart type thing with youtube vids. http://haul.twitik.com/ http://haul.twitik.com/. Youtube's player API totally rules, right?
- jswinghammer 16y agoIf 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 16y agoYeah, the plan is to do SlideShare and PDF viewers (scribd, crocodoc) soon enough, before launch.
- lux 16y agoLooks 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/ http://www.cacophonyjs.com/
- randall 16y agoReminds me of that crazy Arcade Fire video. http://www.thewildernessdowntown.com/ http://www.thewildernessdowntown.com/
- lux 16y agoDefinitely 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.
- doctororange 16y agoThat's wonderful! The syntax is beautifully simple too.
- rwaldron 16y ago:D Glad you like it!
- taitems 16y agoWow, thanks for using the 'Aristo' jQuery UI theme for the Butter creation tool :)
- argoneus 16y agoDoes anyone know what the song/melody playing in the background of the video is from?
- tomstuart 16y agohttp://en.wikipedia.org/wiki/Popcorn_(instrumental) http://en.wikipedia.org/wiki/Popcorn_(instrumental)
- argoneus 16y agoThanks, 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.
- foenix 16y agoThis is fabulous. I might even say that this medium is going to inspire new genres of digital art. Bravo.
- chopsueyar 16y agoI 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.