Fallback options in HTML5 audio and video tags

HTML5 provides  fallback option for its audio and video tag elements .  Some browsers still don’t support HTML5 and for those users if  HTML5 audio and video tags are used in a website they might miss the data in the audio and video tags , in such a case HTML5 provides us with a fallback option . An alternative option is to play the media in the specification supported by the browser .

This following examples explains 2 cases where fallback options can be used . If the browser supports HTML5 video then the specified format is used else the format specified in the fallback option is used .

Using Flash

Flash plugin can be used in the case <video> element is not supported.

<video src="video.ogv" controls>
    <object data="flvplayer.swf" type="application/x-shockwave-flash">
      <param value="flvplayer.swf" name="movie"/>
    </object>
</video>

Java applet to play ogg videos

This following code can be used to play ogg support in the browsers that has support to java but don’t support HTML5.

<video src="my_ogg_video.ogg" controls width="320" height="240">
  <object type="application/x-java-applet"
          width="320" height="240">
     <param name="archive" value="cortado.jar">
     <param name="code" value="com.fluendo.player.Cortado.class">
     <param name="url" value="my_ogg_video.ogg">
     <p>You need to install Java to play this file.</p>
  </object>
</video>

Handling Errors

In HTML5 if any error occurs due to an event this error event will be dispatched to the appropriate source rather than the media tag itself .

<video>
<source id="mp4_src"
        src="video.mp4"
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</source>
<source id="3gp_src"
        src="video.3gp"
        type='video/3gpp; codecs="mp4v.20.8, samr"'>
</source>
<source id="ogg_src"
        src="video.ogv"
        type='video/ogg; codecs="theora, vorbis"'>
</source>
</video>

Since Firefox does not support MP4 and 3GP due to their patent-encumbered nature .The <source> tags which has Id’s mp4_src and 3gp_src will not load . These sources are tried in the same order as they appear in the web browser  and once one loads successfully, the remaining sources aren’t tried at all.