HTML5 Video Tag Usage

Interested in HTML5 and other interactive web technologies? Then you’ve come to the right place. Here at Graphite Lab we always choose the best technology for the job. In today’s world, the job always includes mobile compatibility. Due to rigid platform restrictions, and the discontinued development of Flash mobile, we must turn to other methods of providing interactivity on the mobile web.

Last time, I showed a fairly simply Flash embed code using SWFobject to start off our web programming discussion here on the blog. Now I’d like to move on to share some of the Flash alternatives we’ve explored over the last year. In this post I will show a simple HTML5 video embed.

The HTML5 video tag is one of its most popular features. It allows video to be embedded in a website with traditional HTML code rather than with a Flash or Java player. There are many things to consider when setting this up. Most important to note is the video format. Since we do not have a player plugin rendering the video, the user’s web browser will actually be responsible for rendering the media. You guessed it: Every browser likes a different format for video! There is a detailed chart on Wikipedia’s HTML5 Video entry, showing which formats go on which browser, but essentially you need an .ogv, .webm, and .mp4 versions of your video to cover all browsers.

Create an HTML5 video element.

Now let’s add multiple sources to account for those non .mp4 playing browsers. Video and audio files can be converted online through various sites.

Not showing up yet? Your web server is most likely not set up to serve these new video types yet. All you need to do is edit your .htaccess file on the root of your site. If you don’t have one, just create a new file with this info and save as “.htaccess” and upload to your root. It should read:

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/webm .webm
AddType video/mp4 .mp4

Now your videos should be showing up in any modern browser or phone!

There are a few more basic variables you can set to customize your video presentation. First we add the word “controls” to the tag indicating we want to allow the user to see the video player controls, such as Play, Seek, Mute, etc.

Next, I add a few more options. Autoplay and Loop are pretty self-explanatory. Poster refers to the image shown when the video is done playing, or before it begins if autoplay is off.

In the coming posts, we’ll explore more features of HTML5 and start looping in the necessary Javascript and jQuery to control it.

-Zack Smith
Interactive Developer at Graphite Lab