H264 codec for web video

I have been trying to find out what is the best way to get a video clip onto the web and I have looked at the H264 codec. This seems to give much better video quality for a given bit rate compared with the older Sorenson codec I had tried.

I have used DVGrab to get the video from my camcorder to my pc and I have used DV Type 2 format as this will used with Avidemux to convert to H264 video format:

sudo dvgrab -format dv2 outputfilename

I will then open the dv2 file with Avidemux and select x264 video codec and AAC audio codec. AAC seems to be commonly used with H264 although I assume that MP3 could still be used, but AAC is I think more “advanced” as audio codecs go.

The “format” will be MP4 as this will make it compatible with the latest version of flash.

To actually embed the video in a page I have used Flowplayer which is an open source flash player and seems to work well. I have talked about Flowplayer in my previous blog post a few days ago.

One “glitch” I discovered with H264 in MP4 was that the video would not “stream” which means that the whole video had to download before it would start playing!

Luckily I discovered that there was a program called MP4Box which would tweak the file so that it would start playing while the file was downloading.  What this does is to move the “moov atom” (or “moov box”) from the end of the file to the start of the file.  I’m not sure if there is a way to get Avidemux to do this but MP4Box seems to do the trick!

The command I used to install MP4Box was:

sudo apt-get install gpac

and then the command to run MP4Box was:

MP4Box -add ‘filename.mp4’ ‘newfilename.mp4’

I think you need to add the file path unless you have the file in the current directory. I had my mp4 file in my home directory so I did not need to add a path. Remember that the MP4Box command is case sensitive so “mp4box” will not work as I discovered!

Test Video done with X264 Codec

Click this link to view the test video done in X264 codec.

H264 playback is quite processor demanding so anyone with a very old PC might not get decent playback, but this seems to work fine with my laptop which I purchased over 3 years ago and uses about 70% CPU with no other tasks running. Also H264 only works with recent versions of flash, so if you are running an old version of flash it might be worth updating it.


Getting DV video from Camcorder to the Web

This shows the files that need to be uploaded to your webspace in order to make the embedded video work

I have acquired a “legacy” camcorder (a 5 year old Panasonic NV-DS65B) which shoots basic standard definition video (720×576) so it seemed like a good idea to figure out how to get “embedded” in a website.

I have used Youtube and Vimeo, but getting material online this way has its drawbacks.

One very annoying thing is that they insist on re-processing files once they have been uploaded and I’m not convinced this is always a good thing as each time a file is re processed there is bound to be an extra level of deterioration in quality. The quality from a basic consumer camcorder will never be particularly good but I’d rather not make it any worse than it need be!

Another drawback is that Vimeo will shrink my video down to 512×416 which is presumably so that it will fit conveniently in their player. They give the option to download the original 720×576 file I uploaded but this is extra hassle.

This shows the HTML code needed to make the flowplayer files work

Youtube is even worse in respect of shrinking my video as they reduce it to a tiny 450×360! It gets worse…..If I select “normal quality” in Youtube the file is reduced to a postage stamp sized 300×240.

An alternative to using a video hosting site is to use a free embedded player such as Flowplayer and to use the free webspace that often comes with a broadband package.  Flowplayer is open source rather than freeware which which to me at least is an added bonus.

Originally I thought that you could “embed” a video file in a webpage simply by linking to it, but I then realised that the player needs to be embedded in the page in order to play the video in the page “youtube style”.

When you download flowplayer it will give you an example HTML page which you can then edit as you wish.
I have a added a screenshot of my html file. Please note that I have had to change the bit of HTLM which defines the size of the embedded player so that it displays at the correct size:


My camcorder file is 720×576 but I have had to allow an extra 24 pixels to allow for the Flowplayer control bar. Originally I used 576px in the HTML code but this had the effect of squashing my video by 24 pixels.

I was initially worried that I would need to install something on my ISP’s webserver, but luckily this is not required and you can just upload the flowplayer files to a folder and they will work fine.

What I have not yet figured out is how to embed the file in wordpress so here is a screenshot that links to the webpage:

Example embedded video - click to go to web page

The only bit that I have not yet described is converting the DV file from the camcorder to a format that will play on flowplayer. Flash video seems to be the “standard” for embedded video and a good program that will convert DV to FLV (flash video) is Avidemux. Please note that I used Kino to capture the DV file from my camcorder and I am running Ubuntu Intrepid.

One thing to note when using Kino is that it will need to be run as root to capture as normal users will not have access to the firewire port so hit Alt F2 and run gksudo kino. Also note that Kino will try and save the capture file in root’s home folder so choose a save location to somewhere else otherwise you will not be able to find the file as a normal user once you run avidemux!

Avidemux does not like “raw dv” or “type 1 dv” so choose “type 2” dv in the capture settings. Once you have opened the captured AVI file in Avidemux you can save it using the AUTO > FLV settings, but it is well worth adding a deinterlace filter to remove those nasty horizontal lines that can spoil the look of the finished file. The “yadif” filter seems to work well.