Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. HTML & CSS

Quick Tip: HTML5 Video with a Fallback to Flash

Read Time: 3 mins

In this video quick tip, we'll review how to work with HTML 5 video in your own projects. Because older browsers and Internet Explorer do not understand the <video> element, we must also find a way to serve a Flash file to viewers who are utilizing those browsers.

Viewing Options

Unfortunately, much like HTML 5 audio, Firefox and Safari/Chrome don't quite agree when it comes to the file format for videos. As such, if you wish to take advantage of HTML 5 video at this time, you'll need to create three versions of your video.

  • .OGG: This will make Firefox happy. You can use VLC (File -> Streaming/Export Wizard) to convert your video to this format easily.
  • .MP4: Many screencasting tools automatically export to Mp4; so you can use that file for Safari and Chrome.
  • .FLV/.SWF: Not all browsers support HTML 5 video, of course. To compensate, make sure that you add a fallback Flash version as well.

There are a handful of attributes available to the <video> element.

  • Controls: Display the play/stop buttons?
  • Poster: The value can be a path to an image, that will serve as the display of the video before it is played.
  • AutoPlay: Immediately play the video when the page is loaded?
  • Width: The desired width of the video. By default, the browser will automatically detect the dimensions of the supplied video.
  • Height: The desired height of the video.
  • Src: The path to the video file. It's better to use the <source> child element instead for this task.

Dos and Don'ts of HTML 5 Video

  1. DO create three version of your video to make Firefox, Safari/Chrome, and IE happy. (.ogg, .mp4, .flv/.swf)
  2. DO NOT omit one of these formats. Unfortunately, you can't easily choose to serve HTML 5 video to Firefox, and the Flash fallback to Safari. Safari understands the <video> element, and will expect to find a suitable video format to load. If one is not found, it will display an empty player.
  3. DO keep in mind that full-screen support will not work in Safari and Chrome. However, with the release of Firefox 3.6, you can right-click, and view in full screen.
  4. DO remember that the reason why IE loads the Flash file instead is because it does not understand what the <video> element is. However, if a browser DOES understand that element, it will expect to find a suitable file to load.

Please note that, if I can find a suitable work-around for the full-screen problem, we'll be using this method on Nettuts+ in the near future!

Did you find this post useful?
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.