J.P. Cummins

H.264 Video Fallback JavaScript

h264Fallback.js is a small (1616 bytes compressed) JavaScript library that embeds an H.264 encoded video into a website using the HTML5 <video> element, falling back to Flash automatically. If Flash is not supported, a download link is provided.

Code

Check out the BitBucket code repository or download the JavaScript file (right-click, Save As).

Include each video on your page like so:

<div class="h264Fallback" data-height="{height}" data-width="{width}">
  <p>Video download: 
    <a href="{url}" class="videoLink">{title}</a>
  </p>
</div>

Be sure to replace {height}, {width}, {url}, and {title} with the video's height, width, url, and title. You can even provide different CSS class names if you wish. Don't worry about the strange data- attributes, they're perfectly valid in HTML5.

Finally, initialize h264Fallback by invoking init() with the url to your Flash player.

h264Fallback.init({
  player: 'videos/player.swf'
});

I use JW Player (download and place player.swf in the right place), but this could be any Flash resource including YouTube.

Example

Video download: Hover-YouTube.mov

<div class="h264Fallback" data-height="144" data-width="478">
  <p>Video download: 
    <a href="videos/Hover-YouTube.mov" class="videoLink">Hover-YouTube.mov</a>
  </p>
</div>

<script>
h264Fallback.init({
  player: 'videos/player.swf'
});
</script>

Options

Name Type Example Required Description
controls boolean true No Toggles the browser video controls
player string videos/player.swf Yes URL to the flash video player
videoDivClass string h264Fallback No CSS class name for each video
videoLinkClass string videoLink No CSS class name for each video

Further Reading