HTML5 Video Browser Compatibility

Most modern versions of web browsers support HTML5 video features. However, at the moment the main issue is the lack of agreement especially with video codecs and different type of formats.

The following table explains which formats are supported:

Table extracted from: http://www.808.dk/?code-html-5-video

You can also check which video formats are supported in different browsers.

Fallback if video is not supported

There are many things that you can do if your browser doesn’t support your current video format, here are some fallback options:

Place a Text or Html

<video src="video.mp4" poster="video.jpg" controls>
You browser does not support video feature
</video>
<video src="video.mp4" poster="video.jpg" controls>
<!— html code here-->
<img src="img/video_not_supported.png"/>
</video>

Provide Multiple Sources

You can have different types of video formats so if the browser doesn’t recognize the first source  it will skip to the next one  until it finds a source it can play.

<video poster="video.jpg" controls>
        <source src='video.webm' type='video/webm'>
        <source src='video.ogv' type='video/ogg'>
        <source src='video.mp4' type='video/mp4'>
        <p>This is fallback content</p>
</video>

We can also embed a flash player inside de <video> element to bring support to older browsers.

<video controls poster="video.jpg" width="800" height="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <object type="application/x-shockwave-flash" data="flash_player.swf"
width="800" height="400">
    <param name="allowfullscreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="flashvars" value="file=video.mp4">
  </object>
</video>

Checking if your browser supports video element

If you need to check which HTML5 features are available to your browser including <video > element you can test it on this site:
http://html5test.com