Grow your CSS skills. Land your dream job.

Last updated on:

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" />
	</object>
</video>
<!-- 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>
</p>

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

Comments

  1. Chris
    Permalink to comment#

    Thank you! (:

  2. 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. 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?

    • John Spent
      Permalink to comment#

      Steve,

      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.

    • Andy Rose
      Permalink to comment#

      bump. would also like an answer to this.

  4. legalstuff
    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. Awesome… It works in Mobile Browsers too..

  6. 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. Paul
    Permalink to comment#

    Hi,
    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.

    • Atmos
      Permalink to comment#

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

  8. Jag

    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.

    Jag

  9. AdRog
    Permalink to comment#

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

    • Ashley
      Permalink to comment#

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

  10. Really awesome… It works in Mobile Browsers too..

  11. Newtoid
    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. 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. 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" />
        </object>
    </video>
    

    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;
    }
    

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".