Hello everybody.
In this short video, I will show you how to use the attributes that come with the video and audio elements.
So... we will start in a JS Bin...
In order to embed a video, you first start by adding a video element to your Web page.
Usually, what we do is that we first provide a small message or maybe some links to download the video, in case the browser does not support the video element.
So we write "your browser does not support the video element, please download the video at:" … and I will add the link later.
One of the simplest way to embed a video is to use the src attribute with a URL.
I'm just using a URL I prepared... ok, like that.
And, you can see that the video... there is an area that is already ...black... that appears here, on the right (of the screen).
I'm adding "controls", this is a boolean attribute.
It’s ‘true’ if it's present, or if it's not empty, you can type in anything here... and it's ‘false’ if it's omitted.
If I omit it, the control bar disappears.
I prefer to use it without any value, like that… and I can play the video… you see.
I'm using Google Chrome and the mp4 format for the video, that is one of the the most popular and the best supported format today.
But it's always better, and it's a best practice, to provide different encodings for the video.
In that case, do not use the src tag.
Instead, provide, using the source element, different encodings for your videos.
This is a good practice... now I propose the video in webm, and ogg and in mp4 formats.
The browser will choose the one it prefers.
Either the first one it can play, or the one that, in its opinion, has the best results.
So, here, now I don't know exactly which one is played, but I'm pretty sure that I will target much more browsers than with only a single encoding.
What are the other attributes? I can specify the width and height.
In that case I've got a very small video, 100 pixels width and height.
Other attributes that are interesting is the preload attribute.
You can see that the video started downloading here, and that the black square corresponds to the default size of the video.
We call the size "metadata », and this is the buffer that is filling up.
So, if I'm using preload="none", in that case it asks the browser to do nothing, not to start preloading the video, not preloading metadata...
This is the recommended value for mobile devices, or for Web sites that have a lot of videos, and you don't want all them to preload.
If you type in "metadata", this is another possible value... in that case the video is not preloading but the size of the video, the encoding and other metadata have been downloaded so that the player can have a reserved size on the page...
I recommend using default values, if you are targeting desktops, or preload="none".
Another attribute that is not recommended for mobile devices is autoplay.
In that case, the video starts being played as soon as the buffer has got enough data.
Another attribute is loop.
It's self explanatory.
If you go to the end of the video, it will loop.
You saw here the most useful attributes.
Another one that I recommend, in order to avoid this black square, is the poster attribute.
You type in poster= and you can add the URL of an image.
I uploaded an image, a screenshot of this video, to the imgur.com Web site.
Like this... we get a preview of the video
Notice that Internet Explorer does not recognize URLs here.
It always chooses the first frame of the video.
It's a bit of a problem, so if you don't want this behavior, you will need to use a custom player, or follow the links to the articles Ian Devlin wrote, where he explains how to overwrite this behavior in Internet Explorer using some JavaScript.
That's all for this video, I hope you enjoyed it, the rest of the page is a textual reference about all the attributes.
Here are the most common attributes you can use with the <video> element. They are self explanatory...
src: source of the video.
width and height: size of the video. If unspecified, the default width and height of the video will be used. If you specify one dimension but not the other, the browser will adjust the size of the unspecified dimension to preserve the aspect ratio of the video.
controls: If this boolean attribute is present, the browser displays its own controls for video playback and volume.
poster: This attribute allows you to specify an image that the browser will use while video is being downloaded, or until the user starts playing the video. If this attribute is not specified, the first frame of the video will be used instead.
autoplay: This attribute asks the browser to start playing the video automatically as soon as the page is ready.
preload: The preload attribute is used when autoplay is not used. It tells the browser what to do before a user plays a video. This attribute is a hint - the browser may ignore it. While autoplay and preload are mutually exclusive, if both are present, then preload is ignored. Possible values:
none: do nothing. This saves bandwidth, no video will be downloaded in background before a user or a call to the play() method starts playing the video.
metadata: download metadata, such as length of the video or its format.
auto (default value): the browser will decide. This will depend on the implementation, and on the kind of connection: wifi, 3G, data roaming etc.
loop: Another boolean attribute that indicates to play the video in loop mode (and it starts again when finished).
The autoplay attribute is not recommended if your Web site targets mobile applications (actually, it is often ignored by mobile browsers), as it may consume bandwidth even if the user is not interested in watching the proposed video. If you target mobile devices, we recommend using preload=none as well, as the default value for this attribute is auto.
If the poster attribute is missing, usually the first non-blank frame of the video will be used as the image that is shown when the video is not playing.
Do not abuse of the autoplay attribute. We talked earlier about mobile applications, but even on desktop applications it's usually a bad idea to use it (except for WebCams and for some animations with small video loops, without sound, or for sites like YouTube, with just videos).
The attributes you can use with the <audio> element are a subset of those available for the <video> element. Except for the poster attribute, they are all recognized and have the expected meanings:
src: source of an audio stream.
controls: if this attribute is present, the browser displays its own controls for audio playback and volume.
autoplay: tells the browser to start playing the audio stream automatically as soon as the page is ready - please read details in the above table.
preload: tells the browser what to do before a user plays a sound - please read details in the above table.
loop: indicates to play the audio stream in loop mode (start again when finished).
As with the <video> element, the same best practice in regard to preload and autoplay attributes should be followed.