What is HTML5?

HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX.

Source: Wikipedia

As part of this initiative the HTML video tag is being introduced as well in order to unify the way video is distributed on the web. Currently most online video is distributed via Adobe’s Flash platform, on the contrary of what Apple and Steve Jobs would like you to believe, but we will not go deeper into that debate.

The HTML5 video tag is already supported in several browsers, the latest versions of Firefox, Safari (on all iDevices), Chrome and Opera. It would be great if you had the chance to serve video to all those browsers with the same code, same codecs, but guess what – you can’t, these are standards after all :)

Embedding media in HTML5

Embedding media in HTML5 is fairly simple and straightforward. You just need to use the <video> tag along with the <source> tag to define the path to your media content.

<video controls>
<source src="foo.ogg">
The text written here will be displayed if your browser does not support the <code>video</code> element.
</video>

So far everything looks great, but if I tell you that there is also an option to add many sources in order to assure playback in different browsers the thing starts to smell fishy right.

<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
The text written here will be displayed if your browser does not support the <code>video</code> element.
</video>


By adding another source, you can specify the fallback file for browsers that do not chew up videos contained in the ogg () container (usually encoded with the Theora codec).

For more info on how to include HTML5 video and 1001 detail you should read Mozilla’s guide (where I borrowed these examples).

Fragmentation

This is how HTML5 video is supported at the moment of writing (source):

• Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container.
• Opera (10.5 and later) supports Theora video and Vorbis audio in an Ogg container.
• Google Chrome (3.0 and later) supports Theora video and Vorbis audio in an Ogg container. Chrome also supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.
• Safari on Macs and Windows PCs (3.0 and later) will support anything that QuickTime supports “out of the box.” This is a long list, but it does not include Theora video, Vorbis audio, or the Ogg container. However, QuickTime does support H.264 video (main profile) and AAC audio in an MP4 container.
• Mobile phones like Apple’s iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container.
• Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.
• Internet Explorer has no HTML5 video support at all (surprised?), but virtually all Internet Explorer users have the Adobe Flash plugin.

Just look at the table if you didn’t get it:

Codecs/container	Firefox	Opera	Chrome	Safari	iPhone	Android
Theora+Vorbis+Ogg	✓	✓	✓	-	-	-
H.264+AAC+MP4	-	-	✓	✓	✓	✓

To put it simple – if you want your video to play in every browser (on every device) you need to encode it in two different formats (Theora+Vorbis in Ogg for Firefox, Opera and Chrome & H.264+AAC in MP4 for Safari, Mobile Webkit on Android and Flash).

Serving content

All these videos can be hosted on common web servers, the same that you use to host your static files.

Are you feeling dizzy yet? We still have to work out live video streaming, but we will do that in another post (coming soon).

It’s no secret that flash implementation for linux is buggy, unstable and resource hog. This post is about one particular bug: webcam not working in flash. It took me better part of one saturday to make webcam work in flash. Workaround is actually pretty easy, but you have to know what to do. My environment is: Thinkpad T61, Xubuntu 9.10 (Karmic Koala), flash 10.0.45.2, firefox 3.5.9 and chrome 5.0.342.9.

Ideally, these would be the steps to make webcam work in flash :

• Buy a webcam
• Plug it into your usb port

However, real world always slaps you in your face. First, make sure that your webcam works outside flash :

• Buy a webcam that is listed as supported (green icon) here, I bought cheapest available webcam in local store – Logitech C200
• Plug it into your usb port and use  guvcview to test it (it should work ok, if not, I can’t help you)

Ok, now that we know that webcam is recognized and usable, let’s try it in flash. Oops, when I tried loading our old development flash widget it freezed my firefox tab :

I couldn’t click on anything, because that settings pop-up window wasn’t responding. So, what happened ? Flash widget wanted access to my webcam and microphone and I had to confirm it. But I couldn’t because whole tab was unresponsive. Or was it ? Lo and behold, one key worked. One key out of one hundred and some keys on my keyboard worked.  That key is TAB with which I could cycle through pop-up window’s components (note the yellow rectangle) :

Cool, but the problem was, that I couldn’t toggle the selection, because only TAB worked. Enter, space and other keys didn’t work ! So I thought that replacing flash with version 9 would help or even a downgrade of firefox to version 3. Well, I’ve been down that road before and I didn’t like it. Downgrading only introduces new problems. Another option would be to change flash security settings via some other mechanism. After some googling it turns out that it actually is possible to change settings via Adobe’s Settings manager. I had to add our development server address as trusted :

and :

There are also Microphone and Camera settings in Adobe’s Settings Manager, but they are as unresponsive as that pop-up. Which is a bummer if you have more that one camera and/or microphone. But it’s a limitation that I can live with. Now reload that flash widget and it should work, because that security pop-up never shows up. Right ? Wrong, flash widget works, but there’s no camera stream. It is as if there was no camera plugged into usb port, flash simply doesn’t know it’s there ! At this point I was ready to throw my laptop over my balcony 20 meters down to the pavement. After I calmed down I googled some more and found that v4l (video for linux, used for capturing stream from video devices) comes in two flavors, version one and version two. There are some compatibility issues, so even though v4l version 2 is recommended, it doesn’t always work. It certainly doesn’t with flash widgets. Luckily, it’s possible to force some sort of compatibility layer unto every application that tries to use v4l with following command :

LD_PRELOAD=/usr/lib/libv4l/v4l2convert.so firefox &

Finally, webcam stream showed up in flash widget :

(I used paper snowman to cover up my tired face, no need to show it on the “internets“, there are better pics of me out there)

A note about microphones:
It turns out that there’s a way to set one particular microphone as preferred sound capturing device by using alsamixer (in terminal):

After it loads up press F4 to switch to Capture  settings where you can set Input Source (I have multiple options – internal, docking and mix). However, this still leaves us the problem with camera choice (if there’s more than one available). I don’t know how to solve this problem but, frankly, I didn’t put to much effort into it. I don’t care.

Well, that’s it. Hopefully this will help someone until all multimedia shit finally starts working normally on linux.

Work at MarandLab is hard, very hard :)

In order to spend some time off-work and relax together we went spent our Sunday shooting other geeks in a paintball team deathmatch.

We just got some wonderful news. Our fun Snowball Fight game, developed with Renderspace for SiOL got awarded at the Slovene Advertising Festival (SOF).

The campaign ran in two major Slovene cities, during the 2010 Olympic games, combining the reach and exposure of digital out of home with Qootia’s interactivity and intimate follow-up communication potential via SMS.

Congrats to the combined Qootia and Renderspace team that made this possible:

Project Manager: Tomaž Štolfa
Creative Director: Matevž Klanjšek
Art Director: Žiga Aljaž
Game frontend implementation: Nil Gradišnik, Anže Cesar
Game backend implementation: Aleš Černe

And finally thanks to the great people at SiOL for believing in such a forward looking campaign. We showed it makes sense from the business, marketing and most importantly user’s perspective.

Find out more about Qootia

Finally, we took the time to set up our own little corner of the web. You will finally be able to meet the team and find out a bit more about MarandLAB.

We are planning to keep you updated with what is going on behind the curtains of our think tank, what we are working on or just playing with. You can also expect some posts about specific technologies and their applicative uses. Finally, we will be providing some free material, code snippets and ideas for you to consume and share.

See you around ;)

p.s.: follow us on Twitter