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.
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.
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:
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.
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:
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.
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.
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.