Quick Tip: HTML5 Video with a Fallback to Flash
videos

Quick Tip: HTML5 Video with a Fallback to Flash

on Mar 12th 2010 with 72 comments
Tutorial Details
  • Technology: HTML5
  • Difficulty: Beginner
  • Length: 4 Minute Video

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.
<!DOCTYPE html>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>untitled</title>
</head>
<body>
<video controls width="500">
	<!-- if Firefox -->
	<source src="video.ogg" type="video/ogg" />
	<!-- if Safari/Chrome-->
	<source src="video.mp4" type="video/mp4" />
	<!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->
	<embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
</body>
</html>

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!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • meenu

    how to close video automatically after closing video

  • balmydrizzle

    I try your code but the embed within video tag doesn’t work under IE9. But outside the video, embed can work normally. This is my test code:

    <embed src=”test.flv” type=”application/x-shockwave-flash” width=”1024″ height=”798″ allowscriptaccess=”always” allowfullscreen=”true”></embed>

    <video autoplay controls>
    <!–
    <source src=’test.mpg’>
    <source src=’test.wmv’>
    <source src=’test.avi’>
    < src=’test.mp4′>
    –>
    <!– fallback –>
    <b>play flv<><br>>
    <embed src=”test.flv” type=”application/x-shockwave-flash” width=”1024″ height=”798″ allowscriptaccess=”always” allowfullscreen=”true”></embed>
    </video>

    Do you know why?

  • http://cm-context.dk Carsten Mellerup

    Hi

    I have tried your video coding html5, and it works fine in IE9, Chrome and Safari (mp4), Firefox (ogg) and in IE8 and earlier (swf – flash).

    BUT: Unfortunately it does not work on iPad/iPhone etc.

    I am not an expert, and I hope you will take a minute to look at my coding. What am I doing wrong? Thanks in advance.

    HTML5_Test

    • http://www.pixelsoul.com pixelsoul

      Carsten,

      Try setting the mp4 file first in the source list

      Apparently there is a bug with iPad that stops after the first so putting the mp4 format first should resolve that.

      • Suresh

        The video is working fine in Mozilla, Opera, but not working in google chrome. what could be the reason ? Also the sound doesn’t working in Mozilla and Opera.

  • Ivan

    It’s funny I can’t watch this video without flash installed…

  • http://www.absolutemobile.ru/Avtomobilnoe_zaryadnoe_ustrojstvo_dlya_Samsung_G600.html сотовые телефоны | аккумуляторы для сотовых телефонов | устройства GPS-навигации | MP3 и MP4-плееры | аксессуары для сотовых телефонов и КПК

    I just couldn’t depart your web site before suggesting that I really enjoyed the standard information an individual supply for your visitors? Is gonna be again regularly in order to investigate cross-check new posts

← Older Comments