Skip to main content

HTML5 Video Tag Codec Support


Recently there was a question asked over on 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="" type="video/mp4" />
    <p>If you see this your browser does not support H.264</p>

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="" type="video/ogg" />
    <p>If you see this your browser does not support Ogg Theora</p>

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="" type="video/mp4" />
    <source src="" type="video/ogg" />
    <p>If you see this your browser does not support H.264 or Ogg Theora</p>

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.

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\Temp Delete all EventViewer logs Save to another Disk if you want to keep them Remove any unused programs, e.g. Firefox Remove anything in C:\inetpub\logs Remove any file/folders C:\Windows\System32\LogFiles Remove any file/folders from C:\Users\%UserName%\Downloads Remove any file/folders able to be removed from C:\Users\%UserName%\Desktop Remove any file/folders able to be removed from C:\Users\%UserName%\My Documents Stop Windows Update service and remove all files/folders from C:\Windows\SoftwareDistribution Deleting 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

3 Reasons Why Progressive Web Apps (PWAs) Won’t Replace Native Apps

Many people believe Progressive Web Apps (PWAs) are the future of the mobile web, but in my opinion, PWAs are not a replacement for native mobile apps. Here are three reasons why: 1. Native mobile apps provide a smoother & faster experience  Mobile websites, progressive or otherwise are slower and not as smooth. 90% of the time spent is spent using apps vs the browser . The single most significant contributing factor to a smooth experience on mobile is the speed of the network and latency of the data downloaded and uploaded. When you visit websites on desktop or mobile, there is a lot of third-party code/data that gets downloaded to your device, which more often than not has zero impact on the user experience. This includes: CSS (Cascading Style Sheets) JavaScript Ad network code Facebook tracking code Google tracking code The median number of requests a mobile website makes is a shocking  69 . On the other hand, native apps only get the data that is requi

Consuming the SSRS ReportExecutionService from a .NET Client

  I’ve just finished writing a nice wrapper which internally calls the SSRS ReportExecutionService to generate reports. Whilst it was fairly simple to implement there has been some major changes between 2005 and 2008 and the majority of online and documentation is based on the 2005 implementation. The most important change is that the Report Server and Report Manager are no longer hosted in IIS which will be a welcomed change to Sys Admins but makes the security model and hosting model vastly different. So far I’ve yet to figure out how to allow Anonymous Access, if anyone knows how to do this leave a comment and it will be most appreciated. Getting Started To get started you’ll want to add a service reference to http://localhost/ReportServer_SQL2008/ReportExecution2005.asmx where ReportServer_SQL2008 is the name you configure in the Reporting Services Configuration Manager. The Web Application files are located in C:\Program Files\Microsoft SQL Server\MSRS10.SQL2008\R