How To Use HTML5 Video Tag – The Basics

How To Use HTML5 Video Tag – The Basics

Not as scary as I thought

NOTE: I did have to configure my server so that the ogg MIME type would handle the .ogv extension. If you use Hostgator.com, this is easy. Let me know if you need help.

You’ve all heard of the new HTML5 video tag, but if you are like me, you have seen an example and were like wtf? I was, until a few days ago. It is actually pretty easy, and only takes a few minutes. There are some things you need before you actually get going with it:

  • MP4 video file – for Webkit
  • ogv video file (Theora codec) – for Firefox
  • flv file – for everyone else
  • swfobject.js – for the swf

Be a convert

Miro Video Converter screenFirst things first, you need a video converter. I don’t know about you, but I didn’t have anything that would convert a video file into either an MP4 or Theora format. I found a really damn good one though. It’s free, easy to use, and…wait, did I mention free? It’s called Miro Video Converter, and I highly recommend downloading it (available for PC and OSX). If you look at the screenshot to the left, you will just how easy it is to use. You drag and drop your video into the middle square, select the output type, and hit convert (and it will convert a TON of different types). That’s it! So for the HTML5 video, you need to convert it once to MP4, and once to Theora.

The actual code

Let’s make a note here, that I am just doing something basic here to get the video working in all browsers. It is up to you to make it pretty. Here is the basic code:

<video width="380" height="216" controls>
  		  <!-- used for HTML5 enabled browsers -->
	    <source src="video/video.mp4video" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
	    <source src="video/video.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
   		<!-- fallback for non HTML5 users -->
        <p id='movie'>In order to view this content you need to enable javascript in your browser.</p>
	    <script type='text/javascript' src='scripts/swfobject.js'></script>
	    <script type='text/javascript'>
	       swfobject.addLoadEvent(function(){
 
var flashvars = { };
 
var params = { quality: "high", wmode: "transparent" };
 
swfobject.embedSWF("/demo/video/video.swf", "movie", "380", "216", "9.0.0", "", flashvars, params);
});
	    </script>
	</video>

What does all that do? I swear this is easy, so just pay attention. The first ‘source’ tag is the location of the MP4 video on your site, while the second ‘source’ tag is the location of the ogv file (Theora) on your site. So FF and Webkit will see these videos and play them no problem. But what about the other browsers? That is where swfobject.js and Flash come in. I’m assuming you know what to do with swfobject, because it has become the common way to get Flash onto a site.

If someone has javascript disabled, the ‘p’ tag with the ‘id’ of ‘movie’, will display and tell them they are stupid. If all is normal, then the swfobject replaces the tag with the swf file.

View Demo

To recap

For some reason, the HTML5 video tag was scaring me. But once I got it to work, I went…”That’s it? Well hell, I can do that!” I think you will, too. The main thing to remember is that you need four things to get it working: an MP4 video file, an ogv video file (Theora), the flv/swf, and swfoject.js. I said four, but if you do not have a video converter, then it is five. Once you have those you can pretty much copy and paste the code above, and change the names/locations of the files.

Something extra for you

The player controls are a little bland, but there is a javascript plugin called VideoJS that will skin it if you want to. They have skins that mimic the popular video players out there, like youtube.

Coupon Code: webmachine

Tags: ,

5 Responses to “How To Use HTML5 Video Tag – The Basics”

  1. Pal Barts says:

    Yeah, I use Hostgator and I’m having issues with the OGV videos wanting to download in Windows firefox, rather than play.

    What did you do to get them to play properly?

    • jcDesigns says:

      Well, the code I used is above, so you can see exactly what I did. Do you have a link I can look at to see what is going on?

      • tony_hna says:

        Thanks a lot for sharing this info! I am using hostgator’s shared server plan and cannot get the .ogv files to load in firefox. I keep getting the following message:

        “No video with supported format and MIME type found.”

        I tried adding the MIME types through cpanel and still no luck. I copied your script into a blank html file and uploaded it to my server and am still getting the same error. Here it is: http://www.vajra3d.com/stream.html

        Are you on hostgator as well? do you have any idea why this might be happening? Thanks for any help you can offer.

  2. jcDesigns says:

    I am on hostgator. This is the mime type I used: application/ogg .ogg .ogv

    I can’t see your html file, so I have no idea what your code looks like. You converted your video to Theora though, right (.ogv)?

  3. Stevex64 says:

    I’m just starting to look into html5 video. Is there a way to pass it variables like you can with Flash? A common scenario of mine is having a video that plays in a .swf, and I pass in a variable, maybe the customer’s name, dynamically, so each person that follows a link to a PURL (personalized URL) will be greeted by name in the video. Is there a similar way to pass in dynamic data to html5 video?

Leave a Reply to jcDesigns