There is no longer a need to embed videos from an external source anymore with massive blocks of code. With HTML5, one new tag will control it all! Introducing the new HTML5 video tag, all you need is the file path and the video format (recommended: MP4 or OGG). In this tutorial you will learn how to use the new HTML5 video tag in your site.

Setup

This tutorial was written using Visual Studio 2010. Visual studio is available for free in its express edition to the public. Just go to Microsoft.com/Visual Studio. Go ahead and open up visual studio or your favorite text editor. Save this project with the name of your choice.

Step one.

There really isn’t much to the HTML video tag. Once you create an HTML document, place the following code into your body section:

Remember that where “src” is, the path and actual file of the video source might not match depending on how you save your files, you might be able to get away without the “video/” and just the file name and extension within the quotation marks.

The code may not work in Internet Explorer, unless you have version 9. From the making of this tutorial, only Google Chrome is fully HTML5 friendly. Firefox is almost there as well, version 3.6.13 does not however, support it neither does safari.

Save and run your file in Google Chrome in order to view the video source.

Your browser should render a page like this:
 

Step two.

Adding some attributes to the player. We can actually still implement the width, autoplay, autobuffer, and loop features that we were able to embedding our old video codes. For autoplay, placing true or false in quotations will do the trick and width can be percentage or pixels. A cool attribute is the poster one, you can set it to whatever image you would like for it to maintain while the video downloads. Simply place: poster=”filename.fileExt” in the opening video tag and you got it!

A Few Last Words

There you have it! The main ingredient to embedding multimedia on your page, one tag pair. You can always customize your HTML5 player with JavaScript and CSS, but that’s another discussion. Join us next time for additional HTML tutorials… See you then!
Download Source Files