Demo Video and Audio Lyrics

A video element with subtitles:

A audio element with lyrics:

Note: The demo works best in Firefox version >= 3.5, but also in the latest experimental releases of Safari (with XiphQT installed), Opera and Chrome. It will not work in IE.

This is a demo of audio and video accessibility. Features:

The main elements of this Web page are:

  <video class="v" src="chocolate_rain/chocolate_rain.ogv"
         poster="chocolate_rain/chocolate_rain.png" controls aria-label="Chocolate Rain video"
         autobuffer title="Chocolate Rain video">
    <itext id="lyrics" lang="en" type="text/lrc" display="yes"
           src="chocolate_rain/chocolaterain.lrc" category="LRC"></itext>
  </video>
  <audio class="a" src="chocolate_rain/chocolate_rain.ogg"
       controls aria-label="Chocolate Rain song"
       autobuffer title="Chocolate Rain song">
    <itext id="lyrics" lang="en" type="text/lrc" display="yes"
           src="chocolate_rain/chocolaterain.lrc" category="LRC"></itext>
  </audio>

Credits

The demo was created by Silvia Pfeiffer for Mozilla to explore video and audio accessibility approaches with the new HTML5 video tag.

Thanks to Tay Zonday for the Creative Commons licensed "Chocolate Rain" music and video that were used as an example here, (c) copyright 2007, Tay Zonday.