Recording Interviews on Skype and converting to HTML5 friendly formats the easy way

Tomorrow I will start a series of interviews on the Mozilla hacks blog about “People of HTML5”. I thought it is a good idea to introduce some people and ask them a few questions and thus give a face to the awesome you meet on IRC or see on GitHub.

I found myself with a few issues to crack:

• How do I record a Skype call with good quality?
• How do I convert the video then to a HTML5 friendly format (as “People of HTML5” with Flash movies would be a bit ironic)

The fun thing I found out is that with a good connection and some web trickery this is dead easy. Check the following screencast for the 150 second version:

The first thing I needed was to record the skype call. I tried using ishowu but that didn’t quite do it.

So I thought I bite the bullet and spend some money. Call recorder for Skype was $20 for my mac and does the job swimmingly – it adds itself to Skype and gives you a record button. It stores the recordings as MOV with an AAC and H.264 encoding.

Once I recorded the videos I wanted to convert them for HTML5 embedding. The easiest thing I found was Miro Video Converter – simply drag your file onto it, select WebM/V8 and it converts and saves the file for you (kids, this is why you use Macs!).

All well and good, but not all HTML5 browsers get WebM yet, right? You also need an MP4 version and a OGG Theora one. Also, I needed a space to put the videos where they get the right MIME type and I don’t pay.

Enter Archive.org. If you release your videos and audio recordings as Creative Commons, you can store them there. They provide an uploader on the page or an FTP access (which strangely enough is only one upload at a time). The really cool thing about Archive.org is though that if you wait for a bit, they will have converted your video to MP4 and OGG for you!

Check the video page on Archive.org of the screencast – I only uploaded the WebM video, the other formats and the animated GIF gets created for me automatically.

The only thing is that it doesn’t give you any information that it is converting so all you can do is wait, go back to the page and see when the magic happened.

Once the Archive.org server pixies did their work, you can use a video tag to show your video, using all the sources from your video page:

Notice that as a fallback I point to a site with the Flash movie (either YouTube or in this case Screenr.com which I used to record this screencast).

And that’s it! A $20 app, and free web services and we have hosting and conversion. We can also add subtitling, if we just add Universal Subtitles. I love the web!

Tags: conversion, embedding, html5, skype, video