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
Newer Comments →
  • http://www.moscreative.com Serhiy

    Great tips!
    But the only one problem with this… not all browsers support this(((( so for now I’m preferred to use flash or other media players.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Well yeah – that was half of the tutorial. :)

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        It’s a matter of whether you want to push things along…or settle for the lowest common denominator.

    • http://tdesignonline.com richard lee

      If your client is paying for it why not give them what works best now and later. html5 + workaround. You learn something new they get something fresh you both win. I do understand where you (serhiy) are coming from though Why put in the extra work if you can just kill all the birds with 1 stone. I guess it depends on the situation. Nice Tut J. Way

  • http://www.canaydogan.net Can Aydoğan

    Great tutorial. Thanks!

  • LB

    Why not just use a .h264 encoded MOV?

    Flash can understand that and it can be used with the tag.

    That way, its one less format?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yeah you could do that. I believe YouTube uses that method for their HTML5 videos?? I think so.

    • http://www.lwvideo.com Erik Scairpon

      Render H.264 video through compressor to a .m4v

      You can then change the extension to .mp4 – .ogv – .flv

      Works! Try it. Saves time.

      • Erik Scairpon

        Oops, mp4 to ogv doesn’t work. My mistake. mp4 and flv do though.

  • ShadowAssassin

    This is a great tutorial, I think we should wait before we start fully using HTML 5, because some unintelligent browsers simply can’t comprehend the basic HTML *cough*IE*cough* :(

  • Davis

    I’m not going to add HTML 5 to my website for the following reasons: not all browsers support HTML 5, HTML 5 is supposed to be fully released in 2022 and with all these new features coming out, it will be quite hard to upgrade sites. I’ll just stick with Silverlight and other Microsoft technologies.

    • David Runion

      Ha ha ha! This is even funnier because I really can’t tell if you’re being serious. I wish you said that to me in person so I could laugh at you directly.

      • Andrés Botero

        Well, I don’t know about you, but I tried Internet Explorer 9 Preview, and it looks like they’ve finally made some progress in supporting Web standards. I’m starting to make HTML5 templates, that way I won’t be left behind trying to upgrade everything when all of this is already out.

        Also, I concur the release date (2022) really is sadly away. :’(

      • David Runion

        ————- Continued ————-

        You can start using HTML 5 today! You dont need to fully adapt but you can upgrade small bits of your website. I just cant believe what Davis just said though; just another Microsoft fan boy!

    • http://tf.com travis

      LOLOLOL!

      • http://www.google.com padmanabab

        hi

  • http://miketaylr.com Mike Taylor

    Actually, the Webkit nightlies in Snow Leopard (and Windows?) support full-screen as well. :)

    http://trac.webkit.org/changeset/50893

  • Brad

    Man that was far easier than I thought it would be. I have a few HTML5 pages made and they work like a charm. Thanks Jeffery

  • jenn

    here is another way to go about doing this: http://diveintohtml5.org/video.html i used this in combination with server side programming language for user agent checking…works like a charm.

  • Anto

    LMFAO!
    “Your browser doesn’t support Firefox”

    Omg that made me laugh so much. But Jeff, i did a screencast on this also, if you just link to the videos it will play them with quicktime etc.. But this is about embeding, so yea =)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yeah – it’s probably a good practice to link to the files as well. :)

      • Seth Aldridge

        In all fairness Google Chrome doesn’t support FireFox nor does Safari. :)

  • William

    So if I’m using html5shiv on the page so IE recognizes html5 elements it won’t fallback to Flash?

  • David Runion

    Jeffrey, you are definitely on the cutting edge here. Just this morning I was thinking: how nice would it be to use HTML 5 video and automatically fall back to flash when (IE). You are like my psychic mentor.

    I would like to conditionally run a snippet of javascript to load the flash video via swfObject. Can I replace your code with eg: loadVideo();? I’d sure rather not use browser detection or other such techniques.

  • Jason

    Opera 10.50 supports ogg to and flash can play mp4 (.h264) files :)

  • Marcy

    You don’t need to make 3 versions of your video, only 2 – .ogv and h.264 .mp4. You can use a flash player to play the h.264 .mp4 video. There is a player.swf from Google code or you can use something like the JW Player. Besides the excellent Dive Into HTML5 article listed by others, you can look at http://camendesign.com/code/video_for_everybody

  • http://www.yorickpeterse.com/ Yorick Peterse

    I would be nice if a link to the project “Video for everybody” by Croc Camen would be posted, as it does the exact same thing described in this tutorial, but better: http://camendesign.com/code/video_for_everybody

  • http://sonergonul.com Soner Gönül

    Wow..!

    Thanks !

    That’s cool !

  • http://www.gabri.me Gabri

    i found this yesterday it`s a JS file that makes all browsers understands the element

    http://code.google.com/p/html5media/

  • zcorpan

    “Unfortunately, you can’t easily choose to serve HTML 5 video to Firefox, and the Flash fallback to Safari.”

    It’s pretty easy, though you need to do it with script. There’s an example for this in the spec, search for “fallback” in http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html

  • http://www.ardentway.com David O.

    Great Tutorial, I was wondering about the most effective way to implement html 5 video. After viewing the video It reminded me of what K. Lynch said about how html 5 html will throw the web ” back to the dark
    ages of video ” because of incompatibilities. Do I want all this extra code and duplicate content ? no. Unfortunately Steve Jobs has a death wish for Flash. We’ll just have to wait and see. For now I’ll just settle for publishing videos using youtube all the popular web browsers support it. Iphone supports it and I’m assuming that Ipad will as well. Also Android phones and Blackberries with with Flash 10.1 can view youtube videos. Although it looks like I may have to implement the quick tip for html 5 audio for my audio site.

  • http://noelclarke.s3.amazonaws.com/4321/4321_video.html Daniel J Wilcox

    Take 3 formats into the shower, no i just Wash and Go with h264
    It leaves my video’s feeling soft, shiny and manageable

    Making 3 version of the each video defeats the whole point of the video tag, it means you have to compress, upload and store 3 version of each video.

    This will treble the time it takes to produce videos for the web

    I have been compressing video for the web for the last 10 years, i have just come up with new method for Flash html5 fallbacks that as far as i know no one has thought of

    Using Jquery to convert the video tag into an embed tag
    The embed tag is used in html5 for plugins ( like Flash )

    Whats the benefits of this method

    Validates as html5
    Tested and working on Safari, Firefox, Internet Explorer 7, Google Chrome, Opera and the iPhone
    No swfobject
    Only use 1 video format h264
    No Ogg video
    Automatic Flash fallback
    Force Firefox to use Flash
    Works on desktop and mobile
    1k of Jquery code

    Working demo

    http://noelclarke.s3.amazonaws.com/4321/4321_video.html

    The video is a sneak preview of Noel Clarke’s latest film ( he used to be on Doctor Who and just won a Bafta )
    I do his website, he wanted a single webpage for this video so i took the opportunity to build it as html 5
    Feel free to download the video if you want that’s why its been put up.

    Here’s how the Jquery code works

    I have written a 1k jquery file that detects if your browser support html 5 video and what plugins it can play.
    It converts the video tag into an embed tag if your browser cant play h264 html 5 video

    The video tag is supported on the iPhone so i dont need to execute the jquery code
    So the jquery checks the screen width and height and only runs if the width and height are larger than the an iPhone

    After that it checks to see if your browser supports the video tag, if it does it then checks to see which plugins it supports.

    If your browser can play html5 h264 video ( Safari, Google Chrome ) you get the video tag
    If your browser can’t play html5 h264 video ( Firefox, Opera ) you get a Flash fallback with an h264 video

    Browser that don’t support the video get a Flash fallback with an h264 video
    The iPhone gets the video tag

    You can specify 2 h264 videos in your source, 1 for desktop and 1 for mobile
    Use Handbrake to create 2 h264 videos, High profile for desktop and Baseline profile for the iPhone

    How to turn Gold into Lead ( convert the video tag into an embed tag for flash with jquery )

    There is no need to create an flv video for Flash because chance are you will probably be using the JW player or something similar which can play h264 video anyway.

    So the jquery code grabs the src for the video file and poster and stores them in variables, then passes them into the flashvars in the embed tag which will replaces the video tag if your browser cant play h264 html 5 video

    Why use Jquery
    I build drupal site and jquery is built into drupal, so this solution will work in Drupal as well, you just need to add the jquery code as a Drupal behavior, which i have also done.

    Why no swfobject
    Using the Embed tag you can manipulate the video with css, and it means less javascript to include

    Why no Ogg video
    There are only a couple of encoding tools for ogg video

    ffmpeg2theora – almost 10 minutes to compress 1 minute of video
    handbrake – crashed
    Firefogg – stopped working after Firefox upgrade ( what if your offline )
    xiph quicktime plugin – cant scale the video, green video

    Problems setting the correct mime type on servers ( Amazon S3 in my experience )
    Wont play on any mobile devices

    Making a valid html 5 page for your video

    First of you have to create and html 5 page
    To make it validate and work in Internet Explorer you need to do 3 things

    First add this meta tag to your page to force the content type

    Then add the html5 shiv javascript file to your page to make IE recognize html 5 elements
    After that you have set any html 5 tags you use to display block in your css
    And obviously use the new doctype

    Note of using the JW player
    Dont use the JW player with plugins because it makes an http request to longtail.plugins which means the Flash player loads in much slower. Download the version without the viral plugin.

    Feel free to do a view source and grab the jquery code

  • http://vielhuber.de David

    Nice!

    @Daniel J WIlcox

    Your tool doesn’t work on IE8 without Flash.

  • http://xandesigns.com Alex McCabe

    Thank god this has been created in HTML finally. I have been meaning to give it a go, but keep putting it off. I didn’t realise it was so damn simple. Thanks Jeff. =]

    Oh by the way, thank you also for your codeigniter tutorials. Seriously helpful in my Uni work.

  • Helen

    The problem is making that damn ogg-video. I tried VLC, but the well documented bug really exists: After starting the embedded video, it just stopps after a few seconds and there is no chance to get it running again. There is no normal programm for exporting oggs.

  • http://idreamofpixels.com Valentin

    HTML5 video may be useful in the future because of devices like the IPAD that don’t support FLASH. But let’s face it it’s much easier to stream videos via YouTube / Blip / whatever because: a. videos will work even if you don’t have the right codec, you just need the flash plugin and mosre importantly b. what’s the point of streaming videos from your own site in the first place? plus there’s also c. flash+ogg+mp4 = wasted space

    Web development is an interesting field and it’s nice to stay on the “cutting edge” but let’s not get ahead of ourselves, streaming video and audio was available in HTML4 as well, do you see anybody using that?

  • Osvaldo

    Hi.

    Just some IMPORTANT notes:

    - You don’t need to include 3 video formats, just two: ogg and mp4
    - Most flv players will read the .mp4 file instead of the flv file

    And two comments:
    - ffmpeg2theora works very well for me.
    - Any player/server that adds a logo to the video SUCKS – The most important credit line for a video should go to it’s authors. This goes to YouTube and to the suggested player above. Try http://flv-player.net/

    Cheers,

    Osvaldo

  • Helen

    Sounds good, Osvaldo. It would be a kind of mad if you needed flv to use html5-video.

  • Jhon

    Nico one!

  • http://www.crearedesign.co.uk Stephen Webb

    There has been a lot of talk about HTML 5 recently, so tutorials such as these are a great way to discover just what the technology can offer. Being able to embed multimedia in HTML is going to be a huge advantage for developers, but as clearly shown here the task is quite complex at the moment due to the variety of video formats required.

    It will be interesting to see how this technology is used in the coming months, as browser updates and newer browsers (such as IE 9) allow HTML 5 to have widespread usage. I’m interested to see what other abilities HTML 5 has, maybe some more tutorials regarding this would be very useful.

  • http://www.jordanwalker.net Jordan Walker

    That is very helpful and can be implemented in many projects.

  • Joao Aliano

    Nice little tip =)
    Thanks, Jeffrey!

  • http://danijelg.com Danijel Grabovac

    Great tutorial :)

    So tell me one thing: Is it posible to customize the look’n'feel of the player controls (like in flash)? I have HTML5 Video now on my upcoming blog and in terms of performance it’s kick-ass but I have absolutely nothing black on my site and in Firefox that Player looks quite strange!

  • Ryan

    Is that you talking Jeff??!

  • Akshay Aurora

    I guess the you should have used object tag, embed tag is not valid.

  • http://www.odysseyforge.com Matt B

    This site linked below provides a free, open source, full screen capable HTML5 video player that works in all the major desktop browsers. The downside is that it “requires” javascript rather merely just HTML5. It is still very impressive IMO.

    When I have time since it’s open source, I plan on figuring out how to make it work on the iPhone, iPod Touch and the iPad because I don’t immediately see any reason why it shouldn’t. However, at present it doesn’t.

    http://www.html5video.org/ – Check it out!

    Adding that functionality might even make for awesome follow up to this tutorial!

  • http://www.steveheffernan.com Steve

    I built my js player on the Video for Everybody embed code, so it works with or without javascript.

    http://videojs.com

  • Greg

    I really like the idea – mostly for trying to avoid flash for safari users (especially so mac users can avoid it). My question is will it keep safari or firefox from loading the plugin all together, or what if the user was just on youtube or yahoo and the flash plugin is running it kind of defeats my purpose. Ill totally still do it though, because its a great technology. Thanks for the tip!

  • http://www.alpha-score.com Matt

    HTML5 Video seems to be only for those with the latest browser and the best internet connection (no dynamic streaming). Assuming you want to support as many people as possible it only makes sense to use flash for Video.

    I know HFIVE is new and I can’t wait to start using it but other than to support the iPaddle why would you sacrifice dynamic streaming other than to just tote the Apple line of Flash is dead: http://www.apple.com/hotnews/thoughts-on-flash/

    It seems to me HTML5 video is more of a hassle with very few benefits (ipad/iphone support) but maybe I’m missing something, tell me because I just don’t see the value (for now at least).

    Instead it just makes sense to have a mobile version of the site for Apple products. Flash has worked great for so many years for Video and the reality is HTML5 was under delivered: http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html

  • Guillermo

    I don’t understand why use the tag for html5 and use different kinds of video encoding and even add extra code when you can just use flash? shouldn’t html5 just give in to flash. In flash you can customize your videos buttons and skins very easily and is widely support. help?

  • http://www.klash.nl Virgil Spruit

    @Guillermo

    It’s about standardizing the web. If html5 becomes the new standard you wouldn’t need the extra flash plugin and embed code to show your video, it would even play without javascript. One line of code will do the trick, even for the iphone/ipad.

  • http://www.gamezeed.com game

    Man that was far easier than I thought it would be. I have a few HTML5 pages made and they work like a charm.

  • http://www.dd-resort.com/ resort

    I guess the you should have used object tag.

  • http://motioncity.com Jerry Witt

    @Daniel J Wilcox

    This sounds very interesting. I am experiencing the same problems that you encountered encoding OGG video. And I really like the idea of one video codec.

    I, too, am a Drupal user. My question is, where do you put the html5_video.js code? I am using the Boron theme (which is set up for HTML5). Can I just put this in my theme’s “Scripts” folder and add a line to the boron.info file like scripts[] = scripts/html5_video.js? How do you link to the video? Do you just use a filefield?

    Is there more documentation on this method?

    Thank you

  • http://none Scott

    Surely Firefox will play a Flash FLV file so why do you need to put in the ogg file. Wouldn’t it be simpler and more ideal to have an mp4 playing in HTML5 and a fallback to flv playing in HTML4?

  • Matthew White

    The iPhone and iPad wont play the video unless the MP4 version is first. Its a silly little bug.

  • Emil Stenderup

    Your browser dose’nt support Firefox :D

  • http://www.e-sushi.net/ Mike Edward Moras (e-sushi™)

    Tutorials about standards that are yet to become standards is like selling snow on top of the K2. It causes confusion, provides false information and in the end it renders useless since only the finalized w3c docs will show how to do it correctly… so let’s talk again somewhere in 2020. ;)

  • http://www.actindy.org/ indy

    I don’t understand why use the tag for html5 and use different kinds of video encoding and even add extra code when you can just use flash?

  • divya

    Is there any method to play videos automatically by one one?

  • divya

    Is there any method to play videos automatically one by one?

  • rocksfrow

    I think your approach is backwards… honestly I would prefer playing flash video (flv), and fallback to HTML5 only if flash isn’t supported. HTML5 video playing is very limited, i’d much rather flowplayer be playing the video than the browser (if it supports flash)… and then fallback to HTML5 for ipad/iphones and anything else that’s lame enough to ignore the fact that flash is essential.

  • Sebastian Lasse

    Hello,

    one ‘error’
    be sure to include mp4 src BEFORE all other (otherwise e.g. ipad cannot render the video)
    google either for ‘Video for everybody’ or feel comfortable, because this is easy : http://sandbox.thewikies.com/vfe-generator/

Newer Comments →