Advertisement
  1. Code
  2. HTML & CSS

Quick Tip: HTML5 Video with a Fallback to Flash

Scroll to top
Read Time: 3 min

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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.