HTML5 Video for the rest of us

“Until now, video on the web has been stuck inside a little black box”

– – Brett Gaylor.

Together with the fine folks at Beyond Reality we’ve have upgraded our interactive video platform Marduq to a new HTML5, cross browser and cross device platform, with responsive design, web 2.0, ajax, jQuery, graceful fallback for old web browsers and all the other buzz words you usually find announcing such a product.

It even supports Wordpress embedding out of the box; Check out this clip from when we were VJs. With overlays, Comments Twitter and whatnot:

See that. SEE THAT! Ha. Ha HA haha ha. Pwnd!

So beside being an awesome HTML5-first video player, it is also an iPhone-, iPad- and Android-app that allows taking pictures and hooking them up with videoclips.

Wait, wut?

Okay, say you are reading an excellent magazine like Landbouwmechanisatie (with cool stories about farmingmachines) and you are reading an article about the New Holland t7,170 ( a Tractor ) and then you want to know more. Pull out your phone or tablet, download the app, and make a picture of the picture in the magazine (yo dog).
The picture will work like a QR-Code linking you up with a video review of that New Holland t7,170. Which you can than view at your leisure.

Not only will it show video, but as you can see you can add stuff, like titling, pictures and so on to the video, spicing it up with whatever you like, and these overlays will be triggered by the time-code of the video. So if Smith is interviewed and enters the video, you can add a little caption with his Linkedin information, background info and current GPS information. Whatever you can find on the interwubz about mr Smith.

Moar popcorn please!

Popcorn!

Now we’ve been working with time-based content in Flash for over 5 years, but in the wonderful world of HTML5 we are no longer lone missionaries preaching the gospel of interactive video, there is a whole scene at Mozilla who are working along the same thoughts as we have.

The good people overseas even launching something called Popcorn Maker. And popcorn maker is nice, and for everybody and it’s free to use, and it’s open source, and the world is more beautiful now it has arrived :)

With popcorn.js developer-people like myself can bake little gadgets and toys and playthings like this one.

Seriously

And there is more. Now shit gets serious, as I packed the Seriously.js web shader library in there. Shaders are like Photoshop-effects for anything visual in a program, but on an interesting mixture of speed an acid. And all in real time, accelerated right there on your Graphical Processing Unit (GPU). The code of those shaders looks like it’s on acid too:

//constant variables.\n' +
'const vec4 one = vec4(1.0);\n' +
'const vec4 two = vec4(2.0);\n' +
'const vec4 lumcoeff = vec4(0.2125,0.7154,0.0721,0.0);\n' +
'\n' +
'vec4 overlay(vec4 myInput, vec4 previousmix, vec4 amount) {\n' +
'	float luminance = dot(previousmix,lumcoeff);\n' +
'	float mixamount = clamp((luminance - 0.45) * 10.0, 0.0, 1.0);\n' +
'\n' +
'	vec4 branch1 = two * previousmix * myInput;\n' +
'	vec4 branch2 = one - (two * (one - previousmix) * (one - myInput));\n' +
'\n' +
'	vec4 result = mix(branch1, branch2, vec4(mixamount) );\n' +
'\n' +

But that is mostly because I suck at OpenGL. Which this isn’t. Not exactly. This is what they call WebGL, which is almost the same thing, only totally different, but at which I also suck. There is hope however, programming languages can be learned. Even these weird derivative languages that feed directly into your GPU. Sadly enough only Chrome and Safari support it. And the iPad is said to support it only in iAd, not in the ‘normal’ browser. Bastards.

In plain English: Shaders are a large part of what Instagram does, but I’m using it for real-time effects on my video playback. And yeah, it is pretty awesome like that.

Also in 3D!

But Wait!  There is more!
But this is still so extremely experimental that you might blow your computer. So please, use caution while clicking on this link. Here is another implementation of 3D on the web displayed.

You are now looking at threejs.org with a special implementation of a CSSRenderer that I cooked up over christmas.

This is extremely cool, because it allows me to render HTML boxes as text and pictures and well, as HTML in the CSS renderer and I can render cool and nifty special three dimensional effects like models, shaders and lights through threejs in WebGL. Sadly enough, video routed through canvas is pretty slow, so I need to route that through the CSS renderer, which allows only modest special effects.

But chin up, this is going to be the new interfaces for all your holoscreen setups of the future!

spiders_screen

Spider Jeruzalem already has a holoscreen, the bastard

Also, I want Google Glass. Now. No really, as in right f*cking now.

That is al very nice and dandy, but what the f**k does that toy of yours do?

Hm. Ah! yes, it’s a little mouse recorder — it syncs your mousemovements to the time marker in the video, effectively replaying your mousemovents as you play back the video.  Needs some polishing up, but I thought it was neat, and build with popcorn. And GML. Works great on an iPad.

#update 25/2/2013: NOTE from my lawyer; I made this! All copyright is held by ME! Or rather, by Sense-studios.com, for licencing fees and inquireies, please refer to marduq.tv or sense-studios.com, (or info@sense-studios.com)














* 2 = six