Christian Heilmann

Posts Tagged ‘html5’

Hot new web technologies and how to promote them – a presentation blueprint

Thursday, September 15th, 2011

I am currently at the Mozilla all Hands in San Jose, California and decided to give a talk explaining a lot of open technologies to my colleagues so they can go out to conferences and get people excited about them. We have a lot of people and volunteers, and everybody should feel empowered to speak in public. A lot of times what is missing is a simple way to tell people about the things you want to cover.

To this end I put together not yet another slide deck on SlideShare, but a way to see a presentation and then pick and mix what you want to show yourself.

You can see and present the presentation here (use cursor keys to navigate the slides and press ‘N’ to show ):

The audio recording of the talk (raw, unedited) is available on

The slides and screencasts are available on GitHub and we are also keeping a repository of the explanations and screencasts on the Mozilla Wiki.

The idea is that when you want to do a quick show and tell of new technologies you can go to the slides, uncheck the ones you don’t want to have in your presentation, hit the “start presentation” button and go for it.


Creating screengrabs from HTML5 video with Canvas

Friday, July 1st, 2011

Lately I’ve been playing a lot with canvas and video and see what can be done with it to do things that are tough to do to videos on your own computers. One thing I found really annoying is that it is tough to do screen grabs of videos. In the past it was impossible (before video cards allowed you to capture flash content with screenshots) and even now it is a pain.

If you offer an online video that is HTML5, it is pretty simple to use canvas to allow end users to download images of your video. I’ve written a demo that does exactly that – it takes a snapshot of a video and adds its name and time stamp to the snapshot. Users then can download the snapshot as a PNG.

screengrabs with canvas

Here’s a quick tutorial on how it is done (also available on YouTube)

You can see the code in action or fork and grab the source on GitHub.

The only annoyance is that because of security concerns (cross domain origin) you can not grab images from videos not hosted on the same servergrab frames from videos not on the same server but you are not allowed to save them out as images. In Firefox you can save a canvas as an image, but it doesn’t work cross-browser it seems.

Creating Commodore 64 style logos in Canvas

Tuesday, June 21st, 2011

The year is 1993 and a young me spends quite some time in front of a Commodore 1901 colour screen, a C-64 and use Amica Paint V1.8 with my trusty Competition Pro Joystick to set and delete pixels.

One of the things I did a lot was fonts for scrollers and logo effects, like the ones here:

c64 fonts

Fast forward to 2000 – a bit less younger me got his first PC and used Star Commander to move some of these fonts over to the PC to bring them on to the web. By now I develop in Perl and I write an online tool that allows you to create logos using the fonts:


A few years later, I re-wrote the generator in PHP. Well, seeing the very cool C64 yourself Canvas demo I thought I should now have a go at creating a pure client side version.

So here we go – check out Canvas Logo-O-Matic and get the source on GitHub

canvas logo-o-matic

The way it works is described very well in this Canvas image cropping tutorial and I heavily documented the logogen.js file for you.

Basically the trick is to write a JSON map of all the char data – where a char starts and how wide it is and then crop it out of a single sprite sheet top copy one after the other into the Canvas.

Fixing the embed code for my needs

Monday, June 13th, 2011

As you may have guessed from my talks and all I am a big fan of, a service that automatically converts uploaded videos to all kind of HTML5 compatible formats on the fly. I met with the owner for a coffee and they are overall good guys! Yesterday I realized though that they broke all my blog posts from the past where I embedded their videos as they changed their embed code!

OK, was beta when I used it and I should have read my email but it was annoying nonetheless. I contacted them and we are sorting things out. To recap: converts a video you upload to 13 different formats supporting all browsers, mobile devices and consoles. It creates a single URL that redirects you to the correct format of the video in accordance of the device or the browser used to request it. Awesome!

In the beta program all you had to do to embed a video in HTML5 compliant browsers was this:

<video src="" controls width="500">
<a href="">
Download &#8220;Multimedia on the web&#8221;

For some reason though this now sends my Firefox Aurora to the MP4 version which doesn’t work any more. I guess there is just a detection issue of Firefox Aurora. The official embed endorsed by is the following:

<iframe frameborder="0" width="640" height="360" name="vidly-frame"
<a target='_blank' href=''>
<img src='' />

The embeded.html file always loads a player to play the video that falls back to Flash in Firefox Aurora and Chrome. On Safari and Opera it uses the HTML5 native controls. I want that for all – why load an extra player and Flash when the browser is capable? So instead of using the official player I checked what URLs it generates and put in the URLs by hand:

<video width="500" height="375" controls style="display:block">
<source src="" type="video/mp4">         
<source src="" type="video/webm">         
<source src="" type="video/ogg">
<a target='_blank' href=''>
<img src='' width="500">

This is unfortunate, and it seems to be an issue with Aurora detection. The following works fine in Opera and Chrome and Safari.

<video width="640" height="360" controls 

I could also use this redirect URL to get formats, f.e. gets you the WEBM version.

Detecting the video capabilities of a browser seems to be still quite an annoying thing as you need to do it in JS and not by just reading the user agent on the server. To me, players should never fall back to Flash when the browser is capable of playing it natively – for the sake of accessibility.

Webinale – HTML5 und CSS3 fuer alle!

Thursday, June 2nd, 2011

Derzeit bin ich noch ein paar Stunden in Berlin, wo ich gestern auf der Webinale einen Vortrag ueber neue Web Technologien und deren Einsatz gehalten habe. In dem Vortrag beschreibe ich Probleme von HTML5, wie Firmen es als Marketingidee verkaufen anstatt die Technologie weiter zu fuehren und was man heute machen kann um die Evolution der Webentwicklung weiter zu fuehren. Hier sind die Slides und die Audio Aufnahme des Vortrags:

HTML5, CSS3 und JavaScript fuer alle:

Die Tonaufnahme des HTML5 talks gibt es bei

Die Links, die im Vortrag angesprochen werden: