HTML 5 Video - Part 1: The Basics

Once upon a time, if you wanted to play a video on a website, you needed to build a player in Flash and program all of its features. Equally, your user would be required to have Flash installed on their machines to use the players.

Those days are long behind us. HTML 5 has provided the <video> tag which pretty much all modern browsers have implemented now. This means that with just a few lines of simple HTML, you can have a fully functional video player on your website.

This is by no means new, but recently, I had the opportunity to spend some time with it. So I decided to make this short series of mini-guides to show how it can be done.

By the way, all of the working code can be found here.

Right then, let us begin...

I have a very basic HTML template and now I will put the video player in it:

<video id="my_player" controls>
</video>

That's it! Well, almost. If you look at it now, you will see a full video player in your browser. But with nothing in it:

All we need now is a video to play in it. Thankfully, there is one that is free for everyone to test with. So let us put it in:

<video id="my_player" controls>
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
 </video>

That gives:

And that is it! You have a fully functional video on your website with just 3 lines of HTML- it is the web browser that does all of the heavy lifting with implementation.

So, what does each line mean:

The opening tag: <video id="my_player" controls> has an ID which can be used later for building custom controls in JavaScript (more on that in Part 2).

It also has an attribute, controls. This tells the browser to include all of the video controls, such as the Play/Pause button, the seek bar, volume etc. If you omit this, you will get just the video and no controls unless you build them manually yourself (again, stay tuned for Part 2). There are no attributes for cherry picking certain controls: it is all or nothing.

It is worth noting that you can also add width and height attributes to the video. If you don't, the player will default to the size of the video being played. They work exactly the same way as they would in CSS or in an <img> tag.

The next line: <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />. As you can see, this points to the actual video file that you wish to play. Note, that it is a path to the physical video file itself, not just a page with a video on it. You can have multiple source tags and the browser will pick the one it can play (as older browsers couldn't play every single type and maybe that could be true again in future if new types are supported). So it would look like this:

<video id="my_player" controls>
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
</video>`

I think all the major modern browsers can play MP4 now. OGG and WebM is for the slightly older Firefox browsers.

There is one more thing.

What happens if they are using a browser so old that doesn't support any of the formats you have or even the video tag at all?

Nothing.

The tags will simply render as nothing. Which is why, after the sources, you should add a line:

<video id="my_player" controls>
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    Your web browser does not support video. Please upgrade it to view this video.

That text will only be visible if the video player is not rendered, i.e. on a browser that is too old (which pre-dates 2010 which is very old! Even Internet Explorer 9 had some support). You can add regular HTML here as well if you wish for the message to be a little bit nicer looking or in-keeping with your brand.

You can find out which browsers support which video format (and since when) on this nice table on Wikipedia.

Class Dismissed

That is it for today's lesson. We have started on an incredibly basic level and have barely scratched the surface by setting up a purely default player. I hope, if anything, it shows just how easy it is!

Come back next week for Part 2 where you will learn about how to create your own custom controls for the player. Remember, all the code will be found here.


© 2012-2017