Video For Everybody (HTML5 Video with Flash Fallback)

<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
	<!-- MP4 must be first for iPad! -->
	<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
	<!-- fallback to Flash: -->
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<!-- fallback image. note the title field below, put the title of the video there -->
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p>	<strong>Download Video:</strong>
	Closed Format:	<a href="__VIDEO__.MP4">"MP4"</a>
	Open Format:	<a href="__VIDEO__.OGV">"Ogg"</a>

A complete explanation at Kroc Camen's site, the originator of this technique.


  1. User Avatar
    Permalink to comment#

    Thank you! (:

  2. User Avatar
    Daniel Jenkins
    Permalink to comment#

    Really nice implementation, easiest thing to forget about HTML5 video is the different encoding formats for the video file other than that its dead simple! Thanks!

  3. User Avatar
    Steve Ralston
    Permalink to comment#

    I’m just starting to look into html5 video. Is there a way to pass it variables like you can with Flash? A common scenario of mine is having a video that plays in a .swf, and I pass in a variable, maybe the customer’s name, dynamically, so each person that follows a link to a PURL (personalized URL) will be greeted by name in the video. Is there a similar way to pass in dynamic data to html5 video?

    • User Avatar
      John Spent
      Permalink to comment#


      Were you able to find an answer to this question? I am looking to do the exact same thing as you are (ie: passing a video custom variables) and was wondering if html5 video could do the trick.

    • User Avatar
      Andy Rose
      Permalink to comment#

      bump. would also like an answer to this.

    • User Avatar
      Permalink to comment#

      You are asking the wrong question. The page displaying the video could take parameters and display stuff. The video player is just for video.

  4. User Avatar
    Permalink to comment#

    What is the best video-Format (file) on mobiles (iPhone/Android/WinPhone)?
    not for download, more than view in a browser (like boat/firefox/opera).

    Or exist there any special converters or parameters?

    It is possible to view diefferent videos on Desktop/iPad and iPhone/Android etc.. by CSS3 selectors. So it is possible to get the existing and running videos für Desktops an another for Mobiles.

    Any hints / Helps?

    Thanks for answer.

  5. User Avatar
    Net Apparatus
    Permalink to comment#

    Awesome… It works in Mobile Browsers too..

  6. User Avatar
    Yoav Weiss
    Permalink to comment#

    One thing to watch out for: The <img> tag’s resource will be downloaded on modern browsers as well, even though it is not displayed.
    If it is also being used as the poster attribute (which in the case above it isn’t), then no harm is done. If it isn’t, then it is being downloaded for nothing.

  7. User Avatar
    Permalink to comment#

    Thanks a lot for this clear explanation. It leaves me however with just 1 question: where does the player.swf file come from? I understand this is an flash file that plays the movie. Does it have to be made again for each movie or is there a generic version around and if so where can I download it or do I need to buy a flash development environment (not very use ful for me…)? Could you please explain this aspect a bit more for me?
    Thanks and regards, Paul.

    • User Avatar
      Permalink to comment#

      Just use an old version (from when it was free?) of jwplayer’s player.swf, or find another one.

  8. User Avatar

    Hello All,

    I have recently implemented the above so I can try and get to grips with HTML5 video. It works on all browsers, but doesn’t play on the iPad. The MP4 file is ‘first’ in the queue. If anybody could shed any light on the issue I would be very grateful.


  9. User Avatar
    Permalink to comment#

    Thank you for the code, is there a way of making the movie ‘autostart’. Thanx AdRog

    • User Avatar
      Permalink to comment#

      Just pop autoplay in the video tag after where he has put ‘controls’

  10. User Avatar
    Permalink to comment#

    Really awesome… It works in Mobile Browsers too..

  11. User Avatar
    Permalink to comment#

    Any way to make this work when there is no ogg file available? I need to fallback from flash to html5 for iPad iPhone etc, and I cannot use frames. As far as i can see firefox won’t play the flash video at all.

  12. User Avatar
    Permalink to comment#

    Thanks for the tutorial, you guys should also make sure to check out all the attributes for the video element, that’s where the fun truly begins with a mixture of jquery.

  13. User Avatar
    Permalink to comment#

    I just want to warn that the object fallback inside the video tag just doesn’t work in Firefox.

    I’m working in a project aimed to offline use, where it’s important to keep the full project weight as small as possible, so I tried a solution based on the code in this post in order to avoid the necessity to load an ogv video file.

    //dont' do this:
    <video width="640" height="360" controls>
        <source src="__VIDEO__.MP4" type="video/mp4" />
        <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
            <param name="movie" value="__FLASH__.SWF" />
            <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />

    If you want to show html5 video for any browser that does support mp4 video, and play the same video file via flash in browsers that doesn’t support it (firefox), don’t use that code!: Firefox won’t show the flash player.

    You’d better detect mp4 support (because there is a possibility that Firefox one day start supporting mp4, as happened with Opera), and then serve the video tag or the flash player fallback, as needed.

    canPlay = false;
    var v = document.createElement('video');
    if(v.canPlayType && v.canPlayType('video/mp4').replace(/no/, '')) {
        canPlay = true;
  14. User Avatar
    Permalink to comment#

    I am simply trying to add video in web. I am using mp4 format but it doesn’t display on safari. The funny part is I am not getting any error.In my page there is just a video element and it seems blank on run time.(It works safari/chrome/IE). My code as below.

  15. User Avatar

    This stopped working for Safari right?
    Is there any new hack for safari browser?
    Sorry for my english, spanish speaker

  16. User Avatar

    Hello, I am using the code below to play a 19 second clip. Autoplay occurs perfectly on a computer but on cellular devices I have a play button that must be clicked to begin the clip. Any workaround to auto play on mobile devices?

    Thanks in advance!



Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.