Part One of this tutorial described how to prepare a website to display HTML5 tags, like <video>, properly. Part Two described how to prepare your video to display in an HTML5 web page. Finally, Part Three, which you’re reading now, describes how to actually embed your video into an HTML5 web page.

The concept behind creating a <video> tag for HTML5 in the first place is to make embedding videos as easy as embedding images. In the case of images, for example, the following line of code:

<img title="HTML5 logo" src="http://images.undergroundfilmjournal.com/wp-images/html5_logo.png" alt="HTML5 logo" width="180" height="180" />

Produces the exact image that you see at the top of this article. But, also, the display of images is so standardized across all web browsers that instead of having to enter a line of code every time you want to show an image, web page creation software usually allows for easy drag-and-drop interfaces or, in the case of blogging, selecting images out of a media library.

Video, on the other hand, is currently much more complicated than that. While the HTML5 <video> tag is supposed to be as easy to use for videos as the <img> tag is for images, different web browsers need to read different video codecs, which I talked about in Part Two. This messes things up a bit, but, still, embedding video in HTML5 is much easier than in previous versions of the programming language.

In Part Two of this tutorial, I wrote about how you needed to create three different versions of your one video using three different codecs so that it plays in as many web browsers as possible. Those three different videos will have the file extensions .mp4, .webm and .ogv.

It’s at this point in the tutorial in which you want to upload your videos to your web server and figure out the path to get them to display, just like you would with an image. Below are generic examples linking to one video with the three different codecs:

http://www.mysite.com/videos/my_video.mp4
http://www.mysite.com/videos/my_video.webm
http://www.mysite.com/videos/my_video.ogv

Now it’s time to plug those links into the HTML5 <video> code. The code that I will be using in this tutorial below, which includes the video codec information, I took from the website HTML5 Rocks. Other sites might have other ideas.

The concept behind this code is that the video is called up between the lines <video> and </video>. Between those lines is calls to each of the video files, along with their codecs. Each browser will cycle through those video files and find the one that it can play. So, the full HTML5 video code package, using generic links, looks like:

<video> <source src="http://www.mysite.com/videos/my_video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="http://www.mysite.com/videos/my_video.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="http://www.mysite.com/videos/my_video.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video>

As you can see, the .mp4 video goes first due to a bug with the iPad. If you don’t care about your video rendering on an iPad — although you should — then the order doesn’t matter.

As it stands, that code will give you a video that looks like the below sample. Yes, that may look like it’s only an image of my cat, Leo, but it’s actually a video. Right-click it with your mouse and you’ll get options to play it.

However, most of us, of course, want our online video to have a clickable control panel overlaid on top of the video. That’s easy to do. All you have to do is replace the line <video> with the line <video controls> and your browser’s default control panel will pop up. So, the full code to do this will look like:

<video controls> <source src="http://www.mysite.com/videos/my_video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="http://www.mysite.com/videos/my_video.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="http://www.mysite.com/videos/my_video.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video>

And that will produce this type of video:

If you want a custom designed control panel, well, then you’re going to have to either learn the Javascript programming language or find somebody online who’s created a nice control panel whose code you can borrow. (I’ve done neither of those things myself.)

Also, there’s one last thing you’ll probably want to do, but this is optional. Not all browsers, i.e. older ones, can play video automatically in these formats. Website visitors using a browser that can’t play video will just see nothing. So, for those people, you might want to put a little note in there or something. Video-enabled browsers will just skip over the note. For example, I always put in something like this:

<video controls> <source src="http://www.mysite.com/videos/my_video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="http://www.mysite.com/videos/my_video.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="http://www.mysite.com/videos/my_video.ogv" type='video/ogg; codecs="theora, vorbis"' /> <p style="color:red">(Sorry, but your browser doesn't support HTML5 video. Either view this page in an HTML5-compliant browser like Mozilla Firefox or Google Chrome; or try to update what you got.)</p> </video>

(I also put the note in the color red so that it stands out. That’s what that style tag is there for. Again, that’s optional.)

Now, it is possible to make the video backwards-compatible so that it plays in a Flash-based video player in older web browsers, but that involves installing a Flash-based video player on your server first. So, that means another tutorial, which I hope to get up soon. Plus, there are some ways to customize the player, e.g. display a custom still frame before the video plays, that will mean other tutorials, too.