Video Tag Embed With Fallbacks


Ryanne, Jay and I have been trying to come up with a good way to embed ogg video with the new video tag and have it still work in browsers that don’t support that yet. We want to show people how to set that up at the Open Video Conference. We came up with a method similar to this but hadn’t finalized it yet. Anyway, Kroc Camen’s Video for Everybody code is better.

There were a few things about the Video for Everybody code that I didn’t like so I edited it so that it validates as HTML5 and in the interest of simplification I took out the fallbacks for “QuickTime Installed but no Flash installed” and “No QuickTime and no Flash installed.” Also, the QuickTime object fallback is simplified because it assumes playback only on the iPhone.

So check it out the test page with a self hosted Flash player fallback
one with a YouTube fallback.

If you are using FireFox 3.5 beta you will get an ogg video, If you have Safari 3 or 4 you will get an mp4 and if you have FF 3, IE6, IE7 or IE8 you will get the Flash player (actually playing the same mp4 that Safari is playing).

Here’s the code snippet with a self-hosted flash player
Here’s the code snippet with the YouTube flash player.

The one big stumbling block to this whole thing at the moment is that poster image attribute is not supported yet and (because of that?) the video will load whether you play it or not. My understanding is that it’s supposed to be resolved in Firefox 3.5 before release (who knows what Apple’s plans are with Safari).


15 thoughts on “Video Tag Embed With Fallbacks”

  1. Wow, very cool. It is great to see you all still forging ahead. I wish I could come to the open video conference but I will definitely follow it online.


    ps – new freevlog looks incredible, too.

  2. Poster won’t be in FF 3.5. You are correct that the video always downloads even though not playing bug is fixed. This was done as part of adding the ‘autobuffer’ attribute.

  3. So, question: what are the things about Video for Everybody that you don’t like at this point?

    I’ve been working on my own version of this to relaunch my site using the JW player with WordPress and the Podcasting plugin. Putting in some of the custom player variables has been a little bit of a stumbling block but I may have that solved soon, too. Waffling between a grow my own solution and some slick ajax-y stuff someone else coded. Still undecided.

    It doesn’t really matter what I decide though because I’ll have to redo it in six months anyhow. 😀

  4. Hello, thank you for noticing my bit of HTML. The snippet you created is faulty because a number of the IE conditional comments are out of place after what you removed. I’ve included a fixed version at the bottom of my post.

    The concern I see with the modifications you’ve made is that you may have not tested them fully in all browsers. Video for Everybody’s test page shows all the browsers that have been tested. Every line in Video for Everybody was carefully written and most of them work around one particular bug in one browser or another. Any kind of modification to Video for Everybody will usually break it’s compatibility with somebody! It’s no good showing people something at the Open Video Conference if it doesn’t work as advertised.

    Kind Regards,


  5. The problem I have with this revision, is with a browser that doesn’t do <video>, Flash, or Quicktime, I can’t tell you want me to see a video!
    Where’s the plain text fallback gone? :/

    [ You cannot open this embedded video, please click below etc ]

  6. John,
    One of my concerns is making this simple so I can teach people, which I do both in person and at Freevlog. You are right that I removed the fallback for the case where you can’t do the video tag, Flash or Quicktime. I did that because I think if your running around the web without any of those you are not trying to watch videos. We get tens of thousands of visitors to Freevlog and as far as I can tell 100% of them at least have Flash installed and 98% have version 9.0r115 or higher.

  7. Hi Kroc,
    Thanks for the fix and thanks for the original. My idea in editing your solution was to simplify it. I know I’ve removed compatibility with some browsers in some cases (Opera 9 (works in Opera 10beta), Wii and IE without Flash) but I think worth the trade off – easier + works only 99% of the time.

  8. If all browsers played .ogv files by default like Firefox 3.5 will do, doesn’t this solve the debate here about fallback code?

    To me, this is the bigger challenge: convince browsers to play Ogg by default so we dont have this bullshit where things break in pages depending on where you view them.

  9. I was going to use z-index and css parse differences, then safari 4 came out and the parsing differences identify gecko and webkit as the same, I’m glad I’ve found this.

    I’m using firefox 3.5 without flash and yours worked first time, kroks only after refresh and not a one off, and seems to require Jscript. I’m going to have to check them out before I decide which I think is best, but for me I’d say yours.

  10. I was looking at Video for Everybody and found your site too. Using the VFE site, the “download the mp4” link needs to be clicked for the video to play in the iPhone. On your site in the iPhone, the video appears with a play arrow and the quick time logo. When I use either code in the iPhone, I get a crossed out play arrow and the quick time logo, and have to click a provided download link. I have checked the code, so I think I may have encoded the mp4 in a format that the iPhone doesn’t want to play right away. Do you have some suggestions for the mp4 encoding settings? I use Heywatch to encode, and have tried their iPod, MP4 H264, and Flash H264 encode settings. Thanks!

    1. The easiest way to encode your video for the iphone/ipod is to use quicktime pro (or quicktime x in mac os x) and use the ipod preset. Apple has improved it a great deal over the years – it deinterlaces, keeps the right aspect ratio and is smart about the bit rate it uses.

  11. short story:
    running ubuntu karmic with chromium browser i’am watching the ogv version of the video, instead of higher-quality h.264 version, so whats the deal? whats the point?

    (no, this has nothing to do with any licensing and if you say that it does, i will cry!)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s