Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I am going to open this in both Firefox and Chrome. So there is, in Firefox, and you can see I can just press play. (video playing) And I can open this in Google Chrome, and we see there is the same video file. (video playing) And if we go back over here to our editor, you will see that it works exactly like the audio version, if you have looked at that movie. There is a video tag and inside of that container, there are three different source tags, and each of those is loading a different file with a different encoding.
There is MP4, there is webm, and there's ogg video. There's also this paragraph for browsers that don't support the feature. So what happens is the browser looks through this, and it looks at these media types, and it selects the first one that it supports. So if we go over here to Firefox and we come up here to the Tools menu and select Web Developer > Web Console, you see we have this message here that says, "video/mp4 is not supported." So it skips that file.
And if it skipped that file, it would have selected the webm file, because it didn't give us a message about failing with the webm file. And so if we come back over here to Tools > Page Info, select Media, you see that the webm file is the one that it selected, and here it is, down here. So this is a webm file, and if I come over to the Google Chrome browser, we can go through a similar exercise and find out which file it loaded.
Come down here to the Developer > Developer Tools, and in the Resources tab--it sometimes starts up in the console or one of these others. We select the Resources tab and under frames, video-working.html and you see under this XHR, if it's not opened up, that it selected the m4v file. And we see that that is the first one in the list. So this is a great feature for being able to provide a number of different encodings so that you can support all the different browsers in your audience.
So there's a couple of other attributes here to video tag. You notice that we have width and height, and we can actually set that to scale our media if we want to. We can make this 430 and we can make this 240, and now all of a sudden, it's going to load up a lot smaller in our window. And it scales it on the fly. (video playing) And the same thing works of course in Chrome. (video playing) This should really work in any browser.
We can also select the autoplay attribute. If I save that and reload this in my browser, you will see it starts playing right away. (video playing) And there's also a loop. So if I save that and bring that up in the browser, and again, this works in all the browsers as well. I bring this out towards the end, buffering a little bit.
You can see it's getting towards the end, and it loops right around. I can also get rid of the controls altogether. If I take out controls--I am just going to take all those out and just put in autoplay--and when I hit reload-- (video playing) So you see our controls are gone now from the video. So the only way to control is to provide our own controls, and of course, this is the same in Google Chrome. (video playing) So there are no controls available anymore.
So we have play, we have pause, and we have rewind by setting the current time to 0, And these are attached. These buttons just simply like this onclick, and calling those functions. So these buttons just work fine. (video playing) I can rewind and start again. (video playing) So just like with the audio element, you can't actually style the controller with CSS, but you can provide your own controls. And that allows you to use all of your HTML and CSS skills to provide controls that fit perfectly in with the design of your site.
So the video tag is a very simple and powerful way to embed video elements in your web pages. By providing a selection of different encodings in the source tags, it's possible to support all of the modern browsers.
Get unlimited access to all courses for just $25/month.Become a member