Setting up a HTML5 on-line video site | alo's web site

Setting up a HTML5 on-line video site

Today a friend asked me how to set up an on-line video site. It seems that he read my previous post on the new Audio / Video Streaming plug-in shipped with the latest version of Cherokee, and he felt like it was time to upgrade his web server and site content.

I proposed him to support both the HTML5 and Flash methods for playing the videos. This means, to use the new tag <video>, and only relay on Flash whenever the browser does not support HTML5 embedded videos.

We found a problem on the very first test we did, though. Even if the two web browser that we tested did support <video>, we didn't find a common video format supported by both of them. The test showed Firefox 3.1 supporting Theora and failing to play H264/AAC, and Safari 4 playing H264/AAC but not being able to reproduce Theora.

The solution? Convert the video to the two formats and make both available. If you have done it previously, I bet you know that video converting is one of those time consuming tasks that can easily get messy. Of course, after converting a few videos we found a problem with one of them. Long story short: after some research the solution was to compile FFMpeg/trunk with some other libraries:

FFmpeg version SVN-r17752:
  --enable-shared --disable-mmx --enable-libtheora --enable-libvorbis
  --enable-libx264 --enable-libxvid --enable-libmp3lame --enable-libfaad
  --enable-libfaac --enable-gpl

Here is a very simple example of how you can use the <video> tag for the modern clients, and Flash as second and more secure option. Do not hesitate to read the example page source to check what the syntax is. Beside the Theora/H264 issue, supporting <video> + Flash is really straight forward.

<video controls>
   <source src="test.mp4">
   <source src="test.ogv" type="video/ogg; codecs=theora,vorbis">
   <a href="test.mp4" id="player"></a>
   <script>
     $f("player", "flowplayer-3.0.5.swf");
    </script>
 </video>

By the way, the video streaming is served by Cherokee's Audio / Video Streaming plug-in, so independently of whether <video>  is used, the connection bandwidth will be limited to the video bitrate. Doesn't it look interesting for optimizing your server bandwidth usage? It allows the server to handle more concurrent users, at the same time that it helps to save the bandwidth of the videos that are not completely watched.