Since the arrival of Youtube and Dailymotion, watching videos on websites has now become commonplace. It has to be said that the arrival of broadband has helped democratize videos on the Web.
Up to now, however, no HTML tags were provided for managing video. You had to use a plugin like Flash instead. Even today, Flash is by far the most widely used way of watching videos on Youtube, Dailymotion, Vimeo and elsewhere. But using a plugin has a number of drawbacks: it makes you dependant on those who manage the plugin (in this case, the company Adobe, which owns Flash), you can't always control its operation, there are occasional security flaws, etc. In the end, it's pretty cumbersome.
For this reason, two new standard tags were created in HTML5:
Audio and video formats
When I talked to you about images and the
<img /> tag, I started by quickly reviewing the various image formats (JPEG, PNG, GIF, etc.). For video and audio, I'll do the same... but it's more complicated.
In fact, the way videos work is so complex that you could do a whole course on this subject! But as we're talking about HTML here, we're not going to spend our next few nights exploring the intricacies of video encoding. I'm thus going to simplify things and only tell you what you need to know.
To play music or any sound, many formats can be used. Most of them are compressed (such as are JPEG, PNG and GIF images), which reduces their storage size:
MP3: you cannot possibly not have heard of it! It's one of the oldest and also one of the most compatible formats (all devices can read MP3), so it's still widely used today.
AAC: mainly used by Apple with iTunes, and is a good quality format. IPods, iPhones and iPads can read it with no problem.
OGG: the Ogg Vorbis format is widely used in the freeware world, and in particular in Linux. This format has the advantage of being free, in other words, not protected by any patent.
WAV (uncompressed format): this format should be avoided wherever possible as the file it uses is very large. It's roughly the equivalent of Bitmap (BMP) for audio.
No browser handles all these formats at once. Compatibility with MP3 and OGG is the main thing to be borne in mind:
There's no "ideal" format recognized by all browsers?
Well, no! Fortunately, we can provide browsers with various formats and leave them to select the one they can read.
Video storage is much more complex. We need three items:
A container format: this is a bit like a box used to contain the two items below. The container type can generally be recognized from the file extension: AVI, MP4, MKV, etc.
An audio codec: this is the video sound format, which is usually compressed. We've just seen them and we're going to use the same: MP3, AAC, OGG, etc.
A video codec: this is the format that compresses the images. This is where things get tough as these formats are complex and aren't always free to use. The main ones to know about for the Web are:
H.264: which is now one of the most powerful, widely used formats... but is not 100% free. In fact, it can be used for free in some cases (such as video streaming on a personal website), but the legal uncertainty around it makes it risky to use on a large scale.
Ogg Theora: a codec which is free and not protected by copyright, but less powerful than H.264. Although it's well known in Linux, you have to install software to play it in Windows..
WebM: another more recent, free codec not protected by copyright. It's provided by Google and is now H.264's main competitor.
Which video codecs are compatible with which browsers? There again, you'll see that it's a bit of a mess:
There again, no format really stands out. It's advisable to provide each video in several formats to make it playable on as many browsers as possible.
To convert a video into these formats, I recommend the excellent free Miro Video Converter program that you can download through the web code below.
Just drag and drop your video into the program's window and select the desired output format. This will allow you to create several versions of your video!
Inserting an audio item
In theory, you only need one tag to play a sound on your page:
In practice, it's a bit more complicated than that.
If you test this code... you won't see anything! Indeed, the browser will only download general information about the file (called metadata) but nothing will happen in particular.
You can add the following attributes to the tag:
width: to change the width of the audio playback tool.
loop: music will be played in a loop.
autoplay: music will be played when the page is loaded. Don't overdo this. A website that plays music all by itself whenever it's loaded is generally irritating!
preload: specifies whether music can be preloaded when the page is loaded or not. This attribute can take the following values:
auto(default): the browser decides whether to preload all the music, only the metadata or nothing at all.
metadata: only loads the metadata (time, etc.).
none: no preloading. Useful if you don't want to waste bandwidth on your website.
It'll be better with controls so let's add them!
<audio src="hype_home.mp3" controls></audio>
The appearance of the audio player varies from one browser to another. The figure below shows, for example, the audio player in Google Chrome.
Why open the tag if you're going to close immediately afterwards?
This allows you to display a message or provide a fallback solution for browsers that don't support this new tag. For example:
<audio src="hype_home.mp3" controls>Please update your browser!</audio>
Those who have a recent browser won't see this message. Older browsers, that don't understand the tag, will, however, display the text inside.
We've seen that some browsers don't support MP3. What's the solution?
You have to provide several versions of the audio file. In this case, we're going to build our tag like this:
<audio controls> <source src="hype_home.mp3"></source> <source src="hype_home.ogg"></source> </audio>
The browser will automatically take the format it recognizes.
Inserting a video
You only need a single
<video> tag to insert a video in the page:
But again, you may be disappointed if you only use this code. There's no control to start the video!
Let's add a few attributes (most of them are the same as for the
poster: image to be displayed instead of the video until it's run. As default, the browser takes the first frame of the video, but as it's often a black frame or a frame unrepresentative of the video, I advise you to create one! You can simply do a screen capture of any moment in the video.
width: to change the video width.
height: to change the video height.
loop: the video will be played in a loop.
autoplay: the video will be played when the page loads. There again, don't overdo this. A website that runs something all by itself whenever it's loaded is generally irritating!
preload: specifies whether the video can be preloaded when the page is loaded or not. This parameter can take the following values:
auto(default value): the browser decides whether to preload the whole video, only the metadata or nothing at all.
metadata: only loads the metadata (time, size, etc.).
none: no preloading. Useful if you want to avoid wasting bandwidth on your website.
Here's some code that's a bit more complete:
<video src="sintel.webm" controls poster="sintel.jpg" width="600"></video>
And here's the result in the figure below.
Why do you open and close immediately after the tag?
The answer is the same as for the
<audio> tag. It allows you to display a message or provide a fallback solution (in Flash) if the browser doesn't recognize the tag:
<video src="sintel.webm" controls poster="sintel.jpg" width="600"> It's time to update your browser! </video>
How do you cater for all browsers since they all recognize different video formats?
You use the
<source> tag inside the
<video> tag to provide various formats. The browser will take the one it recognizes:
<video controls poster="sintel.jpg" width="600"> <source src="sintel.mp4" /> <source src="sintel.webm" /> <source src="sintel.ogv" /> </video>
How do you display the video in full screen?
It's not possible at present. In fact, there is indeed a way in Firefox but it's a bit hidden away: you have to right click on the video and select "Full Screen".
How can I protect my video, I don't want it to be able to be copied easily!
It's not possible. Tags were not designed to limit or prevent downloading. It's logical enough when you think about it: for visitors to be able to see the video, they'll have to download it anyway, one way or another!
So don't imagine you can prevent your video being downloaded using this technique.
Inserting music or video didn't used be possible in HTML. You had to use a plugin like Flash.
<video>tags have been introduced and allow you to play music and video without plugins.
There are several audio and video formats. In particular, you should know about:
for audio: MP3 and Ogg Vorbis;
for video: H.264, Ogg Theora and WebM.
No format is recognized by all browsers: you have to provide music or video in various versions to satisfy all browsers.
You have to add the
<video>tags to allow visitors to start or stop the media.
These tags are not designed to prevent the downloading of music and video. You cannot protect you media against being copied.