Skip to main content

HTML5 Video Tag Codec Support

 

Recently there was a question asked over on Stackoverflow.com regarding best practices around H.264 and the Video Tag.
The answer with the most votes has IMO provided an inadequate solution and I thought I would take the time to clear this up with a new post.

Unfortunately and to the frustration of developers that deal with Video content, HTML 5 has dropped the Codec as part of the specification leaving the Browser vendors to implement whatever they want.
However the consensus is to use H.264 with even Microsoft adopting this for the forthcoming Internet Explorer 9.

Here’s how it stacks in terms of browser support as of writing.

Browser H.264 Ogg Theora
Google Chrome Yes Yes
Firefox No Yes
Safari Yes No
IE9 Yes No
Opera No Yes

H.264 Only – Chrome, Safari & IE9

If you see this your browser does not support H.264

<video width="480" height="360" preload autobuffer controls>
    <source src="http://blog.willbeattie.net.s3.amazonaws.com/framecount.mp4" type="video/mp4" />
    <p>If you see this your browser does not support H.264</p>
</video>

If you view this on Firefox you will see that their implementation does not ignore the Video tag and display the paragraph tag, instead it shows show the big X.

Ogg Theora Only – Firefox, Opera, Chrome

If you see this your browser does not support Ogg Theora

<video width="480" height="360" preload autobuffer controls>
    <source src="http://blog.willbeattie.net.s3.amazonaws.com/framecount.ogv" type="video/ogg" />
    <p>If you see this your browser does not support Ogg Theora</p>
</video>

H.264 & Ogg Theroa – Firefox, Chrome, Safari, Opera & IE9

If you see this your browser does not support H.264 or Ogg Theora

<video width="480" height="360" preload autobuffer controls>
    <source src="http://blog.willbeattie.net.s3.amazonaws.com/framecount.mp4" type="video/mp4" />
    <source src="http://blog.willbeattie.net.s3.amazonaws.com/framecount.ogv" type="video/ogg" />
    <p>If you see this your browser does not support H.264 or Ogg Theora</p>
</video>

If you view this page on all of the aforementioned browsers you will notice that the current Video tag implementations are not very helpful to developers. The ideal would be that the Browser detects the Codec that they don’t support and then fallback to whatever is in the Video tag.

Now if you are just displaying video content then this doesn’t pose too much of a problem as you can just support a single codec and then fallback to a plug-in based media player of your choice. However if you want to start implementing features using Canvas then this becomes a major roadblock.

The only solution right now is to have an H.264 version and an Ogg Theora version of the same video which is a real PITA especially if you have thousands if not millions of videos to deal with.

If you do go the route of converting all your videos from H.264 to Ogg Theora then I’d recommended using the FFMpeg2Theora convertor as it’s very easy to use.

Hope this clarifies some of the challenges presented when dealing with Video content using HTML5.

Comments

Popular posts from this blog

Freeing Disk Space on C:\ Windows Server 2008

I just spent the last little while trying to clear space on our servers in order to install .NET 4.5. Decided to post so my future self can find the information when I next have to do this. I performed all the usual tasks: Deleting any files/folders from C:\windows\temp and C:\Users\%UserName%\AppData\Local\TempDelete all EventViewer logs Save to another Disk if you want to keep themRemove any unused programs, e.g. FirefoxRemove anything in C:\inetpub\logsRemove any file/folders C:\Windows\System32\LogFilesRemove any file/folders from C:\Users\%UserName%\DownloadsRemove any file/folders able to be removed from C:\Users\%UserName%\DesktopRemove any file/folders able to be removed from C:\Users\%UserName%\My DocumentsStop Windows Update service and remove all files/folders from C:\Windows\SoftwareDistributionDeleting an Event Logs Run COMPCLN.exe Move the Virtual Memory file to another disk However this wasn’t enough & I found the most space was cleared by using the Disk Cleanup to…

CPF Contribution Rates for new Singapore Permanent Residents (SPR’s)

Recently my wife and I applied and got approved for Singapore Permanent Residency. After completing the formalities the most significant immediate change is the contribution to CPF which is Singapore’s mandatory social security savings scheme requiring contributions from employers and employees. CPF contributions start from the date you obtain SPR status, which is the date of the entry permit.   Being a relentless budgeter I needed to know exactly how much I and my employer would have to contribute so that I could adjust my budget accordingly as the employee contributions get deducted from the monthly salary. After doing some research I discovered that there is a “graduated” approach to CPF contributions for new SPR’s where the contributions gradually increase in the first and second year and then upon reaching the third year are at the full amount. Note: There is an option for employers to contribute the full amount for year 1 and year 2 and the employee can use the graduated rate, b…

Implementing Custom Castle Windsor Facilities

If you’ve been following my posts you would know that I love Castle Windsor. One of the many useful features I have found is the Facility and I’m going to try and give a good example how you can make use of this. In a recent post I showed how you can add Cross-Cutting concerns to your application by using Interceptors.Now when configuring the Container you can explicitly configure each Interceptor per Service but when you have lot’s of components it can get pretty hard to maintain after a while and can also introduce subtle issues if someone forgets to configure it correctly.Below is how you would configure your Container without using a Facility. On the last line we are specifying the Interceptor explicitly. public void Configure() { container = new WindsorContainer(); container.Register( Component.For<CacheInterceptor>(), Component.For<ICacheProvider>() .ImplementedBy<WebCache…