Website Helpers.com

  Articles, tips, and resources for webmasters


a project by Michael Bluejay | email

 
The actual code to get video onto your website

The <video> tag  and the <object> tag

by Michael Bluejay • July 2010 • Updated Oct. 2010

This article is about the HTML code you use to get videos onto your website.  If you need to learn about video formats first, please see my article on the basics of web video.


What makes getting video onto your website a pain
is that no one video format and file format is compatible with every browser.  Here's the rundown.

  1. There is no one format that works on everything:
    • Flash works on most browsers, but not on the iPhone or the iPad (and isn't preinstalled on post-Oct. 2010 Macs).
    • The <video> tag works on those, but not in Internet Explorer (not even v.8).
    • The <video> tag works in Safari, Chrome, and Firefox, but Firefox doesn't support .mp4 with that tag, only the more obscure .ogv.
  2. So you have a few choices:
    • Use a Flash player, and accept that iPhone, iPad, and newer Mac users can't see your video1.  Or...
    • Use the <video> tag with an .mp4 file format, and accept that IE and Firefox users can't see your video.  Or...
    • Use the <video> tag and feed it both an .ogv file (for Firefox) and an .mp4 file (for everything else), and accept that IE users can't see your video.  Or...
    • Wrap the <object> tag for Flash video inside the <video> tag, and make both an .mp4 and an .ogv file available on your server.  This will work with damn near everything, since the browser in question will use whatever it can support.  The code for this appears below.  Obviously this is the most-compatible solution, but it does require a little more code, and you can't get away with having just one video file.  You'll have to make both an .mp4 version and an .ogv version.
I know, lousy choices.  Five years from now the <video> tag will likely work on just about all browsers and they'll all support the most common video formats.  In the meantime, we've got to wade through video soup.  So let's get crackin!

Safari, Chrome, and iPad/iPhone  (<video> tag)

If you only care to support Safari, Google Chrome, and Apple's iP*d products, the code is really simple:

<video src="mymovie.mp4" width="320" height="240" controls></video>


Here's video using the actual code above. As I write this in June 2010, it won't work in IE8 or Firefox 3.5.


There, that's it, you're done.
  Just convert your video to an .mp4 file, using either H.264 or MPEG-4 encoding (H.264 recommended), and that's it.

Of course you've got some options:

  • Size.  You can set the width & height to whatever you like.
  • Controls.  The controls attribute makes a little controller visible.  Otherwise your visitors will have no way to start and stop the video.
  • Preload.  If you want the video to load automatically as soon as the page loads (rather than waiting for the user to press the Play button), add a preload attribute.  e.g.,  <video ...  preload>  This doesn't start playing the video automatically, it just loads it automatically.  If you want to prevent the video from loading automatically, use the attribute preload="none".  You might prefer that to save on bandwidth, if you don't expect all your visitors to watch the video.  If you don't specify the preload attribute, what's the default?  Ask your browser maker.  The default for preload is ON in Safari, but when you set it to none, the video placeholder on the page says "Loading..." when you load the page, forever, even though it's not really loading anything.
  • Autoplay.  Adding the autoplay attribute will make the video play as soon as the page loads.  If you don't specify this, the default is to wait until the user clicks the Play button.

Non-Apple products  (Flash)

Windows supports Flash, but the iPad and iPhone don't, and it's not preinstalled on Macs starting in Oct. 2010.  So if you don't care about visitors with certain Apple products not being able to see your video*, you can use Flash.


Here's video using the actual code below.  It should work on pretty much everything except the iPad and iPhone. I tore my hair out trying to get FlowPlayer to display a splash image. If anyone knows exactly how to modify flashvars to do this, please let me know!

The easiest way to use Flash is to upload your file to YouTube or some similar service, and then copy & paste the "embed this video" code they provide.  Then bang!  You've got video on your site.  Nothing to configure, and you don't even have to convert the video file or even host it.  You just upload it to YouTube, let them convert it, and then take the code that YouTube gives you.

But maybe you don't want YouTube on your site, for whatever reason.  Maybe it doesn't look professional enough for you, or maybe you want to show your own ads before or after the video, or have various other options you can't get from YouTube.  In that case, your first step is converting your file to something Flash can handle.  I recommend making an .mp4 file with H.264 encoding.  That will give you good quality for a small size, and you'll also be able to use that video for other purposes.  (Such as the <video> tag, which the iPad does support.)  Your other option would be to use the .flv or .f4v Flash file formats (with vp6, Sorenson, or H.264 encoding), but since .flv files can't be used with anything but Flash, those files aren't as versatile.

Okay, so what code do you use to let Flash play your video file?  Well, er, that depends on what Flash player you want to use.  You've got a lot to choose from.  Probably the most popular is FlowPlayer, since it's free.  It does show a tiny " FlowPlayer" message before the video begins, and if that bothers you, you can buy Wimpy Wasp for $39 which lets your visitors play your Flash video without any third-party credits appearing.

Here's a sample of some fairly simple FlowPlayer code:
<object id="flowplayer" data="flowplayer-3.2.2.swf" type="application/x-shockwave-flash" width="320" height="240" >
    <param name="movie" value="flowplayer-3.2.2.swf">
    <param name="allowfullscreen" value="true">
    <param name="flashvars" value="config={'clip':{'url':'mymovie.mp4','autoPlay':false}}">
</object>

mymovie.mp4 probably makes sense to you, but what the hell is this flowplayer-3.2.2.swf file?  That's the Flash player program that you download from the Flowplayer site, and upload to your own server.

The code can certainly get a lot more complicated than this, if you add all the various features available to you, but the above will get the basic video onto your site.

Compatibility with everything  (<video> + Flash)

Lucklly, there's a way to have our page show video to everyone, no matter what browser they're using.  (Well, not Netscape 2, but you get the point.)  What we do is to combine the <video> tag that we used in our first example above, and the <object> tag that we used in our second example:
<video ...>
<object ...>
</object>
</video>

If we've got a modern browser and it understands the <video> tag, it will use it.  If it's an old browser which has no clue, it will ignore it and load the <object> tag to play our Flash video.  Nice!

Of course, there's a catch.  There's always a catch.  Let's say you use this video tag:
<video src="mymovie.mp4" width="320" height="240" controls>
Firefox won't play it.  It understands the video tag, but it doesn't understand .mp4 files.  It understands only the (currently) relatively rare .ogv video files.  So Firefox loads the <video> tag but can't play it, and it won't load the <object> tag.  So a Firefox visitor doesn't get any video.

There's a way around this.  We make a second file in .ogv format, and we list both files in our <video> tag, so Firefox can pick the .ogv version and all the other <video>-compatible browsers can pick the .mp4 flavor.  (Are you happy now, Firefox?)  Here's how the complete code looks, including the Flash version with Flowplayer for browsers that don't understand the <video> tag.
<video width="320" height="240" controls>
  <source src='mymovie.mp4' type='video/mp4' />
  <source src='mymovie.ogv' type='video/ogg; codecs="theora, vorbis"' />
<object id="flowplayer" data="flowplayer-3.2.2.swf" type="application/x-shockwave-flash" width="320" height="240" >
    <param name="movie" value="flowplayer-3.2.2.swf">
    <param name="allowfullscreen" value="true">
    <param name="flashvars" value="config={'clip':{'url':'mymovie.mp4','autoPlay':false}}">
</object> 
</video>

Here's video using the actual code above. It ought to use the <video> tag where available, and otherwise fall back on Flash.

There!  Now that will play on damn near everything.

Of course, there are a few "gotchas".  There always are, right?  First, the "<source src=*.mp4>"  has to come first, otherwise the iPad won't play it.  Also,  if your server doesn't have video MIME types set, then Firefox won't play the .ogv video.  Add this code to your .htaccess file to get Firefox to play properly:

AddType video/ogg  .ogv
AddType video/mp4  .mp4
Usually the .mp4 mime type isn't necessary, but it sure couldn't hurt to cover your bases.

Finally, I simplified the <source> tags above.  They work, but in theory, by including more info in your source tag you can help browsers better understand whether they can play your video or not.  The big, hairy list of attributes you can use with the <source> tag is at W3.org.

To give credit where due, this ultra-compatibility method was invented by Camen Design.

Using .mpg is not a solution

After reading all the above, maybe you thought, "Screw it!  I'll just use old .mpg files!  All modern browsers should be able to play the old stuff, right?"

Nice try. 

It's actually hard to use <object> or <embed> in a way that all browsers can understand.  If you'd like your eyes to glaze over, have a look at this screed by Elizabeth Castro on the subject.  And of course, even if you can get it to work, your video files will be up to four times larger than with a modern format, or they'll look like crap.  Or both.  Good luck.

 

My other web video articles

Web video basics.  Learn the difference between file formats and video formats, .mp4 vs. MPEG-4, and get the lowdown on bitrates.

Web video file formats. Exactly what you'd expect: All the different formats explained and compared.

Getting video onto your site with YouTube. Explains the pros & cons of using YouTube to get video onto your site, and exactly how to do it.

 

Other Handy Mac utilities

MPEG Streamclip. For both Mac & Windows, lets you easily edit .mpg files in a QuickTime Player-like interface. Also joins movies together. Nice. Best part, it's FREE!

Visual Hub. This is the Swiss Army Knife of video conversion.

Contacting me

Please don't send me your questions, I can't answer them. If I knew the answer it would be on this web page already. In any event, I already have several thousand messages in my In Box, and it's impossible (not inconvenient, but impossible) for me to reply to even a fraction of the people who want my help. I just can't function as a free helpdesk to the world. On the other hand, I welcome corrections or other useful information you want to share. Questions sent to me never get answered.

More resources (on other sites)

Website Helpers.com

  Articles, tips, and resources for webmasters


a project by Michael Bluejay | email