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

First 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

As you may know, I am building an HTML5/Wordpress theme using the HTML5 Boilerplate. I have no problems with it at all. What I do have problems with, is trying to figure out what tag to use, and where to use it. I’ve talked about this before, with the ‘nav’ and ‘address’ tags. That was before I actually tried to build anything using the new HTML5 tags. Now that I am trying to use them, I find myself questioning if I am using the right tag!

HTML4 (whatever . version we are on) is not complicated. Wrap text blocks in ‘p’ tags. Links get wrapped in ‘a’ tags, and so on. All of which is easy to understand. There are no ‘ifs’ or ‘sometimes’ involved. After reading through some of the definitions for these new tags, I get the feeling that the interpretation of when to use them can be subjective.

You want to know how to confuse the hell out of all of us? Easy as pie. CHANGE THE TAG DEFINITIONS AS WE GO!

ASIDE From that, everything makes sense….oh wait, no it doesn’t

Let’s take a quick look at the ‘aside’ tag, a new HTML5 tag, that I am/was struggling with. Here is the definition PRIOR to the change, which if you are NOT careful when you are using Google to search, you might still get:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Just from the word itself, ‘aside’ brings to mind a ‘sidebar’, but through yet more reading I found that is not the case at all. It is more of a blockquote thing. Content that is related to the article it is in, but can stand alone by itself is what should be in the ‘aside’ tags. At least that WAS the definition. After some people bitched, apparently the spec writers listened and changed it. Thank God for this guy’s article.

I found the new definition in that article, (authored by Mike Robinson), saying “hey, remember when we said this doesn’t mean ‘sidebar’? Nah, go ahead and do that.”

New definition for the ‘aside’ tag”

When used within an article element, the contents should be specifically related to that article (e.g., a glossary). When used outside of an article element, the contents should be related to the site (e.g., a blogroll, groups of additional navigation, and even advertising if that content is related to the page).

MUCH clearer now. You just have to pay attention to where you are putting it. If it is in an ‘article’ tag, then it must relate to the content of that article. If not, then it must be related to the site. Honestly, I can’t think of a time when something isn’t related to the site. Maybe just random links? If you know, let ME know.

HTML5 sounds awesome, but is it ready?

This has been discussed in plenty of articles, but I only remember seeing arguments against it because of browsers that don’t support it. Now that I am trying to build with it, it brings me to another point that I’ll have to go and search for, to see what others are really saying about it.

Is HTML5 even ready? Forget the browser issues. That part is obvious and has some work arounds. The real problem I see is that the tag definitions are NOT written in stone yet. The fact that a tag’s definition can change on the fly could mean wide spread misuse. I’ve already talked about how the nav and address tags can be hard to get a hold of. I’ve worked with it now for about 3 hours trying to use a bunch of new tags for semantics, and I am getting horribly confused.

I am not saying HTML5 is horrid. I will admit, that my article before was a bit premature. I am indeed digging it. Well, some of it. I just am not sure that it is ready to be used. Of course I’m not saying don’t, and certainly don’t wait till that silly 2022 year thing, which apparently has been misquoted according to this. But I want the definitions to be fairly stable.

Final Thoughts

Ok…I like HTML5. I like what it is trying to do. I am still worried about wide spread misuse of some tags, and I think my nav/address article still holds on that. My current and future projects will now incorporate the new tags, mainly so that I can learn them. I just don’t want to be called out on interpreting the definitions wrong.

What are your thoughts on HTML5 usage? Let’s hear some comments!

Coupon Code: webmachine

If you haven’t at least heard of the HTML5 Boilerplate template, then you live in a dark cave as a hermit and are still using Photoshop 3. If you have, but haven’t checked it out, then you 100% need to. I downloaded the files (it comes with a few) and looked through it. Thank the gods it is commented so well, because there are a few things that I didn’t know going on.

It is an HTML 5 starting template loaded to the teeth with everything you could need…and then some. Just some of the things in it are: script tags to jQuery 1.4.2 (hosted on Google), Modernizer 1.5 js (see comment below by Paul Irish clearing things up for me on this), Google analytics code, Meyer’s reset CSS, conditional comments…this thing is PACKED with awesome.

Personally I’m going to remove some things, because I don’t need them, which is perfectly fine because this file is delete friendly. What I am going to add is CSS PIE. But that is the brilliance of it. It’s a great starting point, and you can do what you want with it. So go download it!

Conditional Commenting Genius

Forget about using conditional stylesheets now. Use this:

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if gt IE 9]>  <body>             <![endif]-->
<!--[if !IE]><!--> <body>         <!--<![endif]-->

This is great, because now you don’t need the extra CSS files for IE problems, and you don’t need to use hacks. For example, let’s say you have margin or something that is going bad in IE6. If the browser detected is IE6, then it puts the class “ie6″ onto the body. You would then write the CSS like this:

#myContainer {
margin: 20px 20px 0 10px;
}
.ie6 #myContainer {
margin: 20px 10px 0 5px;
}

Easy? YES. And awesome. Not much else to say about it other than start using this instead of whatever else you were doing, because this was better.

Things to come at The Web Machine

Well, as you may know from previous posts, I’m starting to learn how to theme Magento, which will come in handy, because I will be selling HTML/WordPress templates. Unique, not templates. Meaning only 1 of each will be sold. If you buy it, no one else will have it. Along with that I plan on writing more on Magento, maybe my own tutorial on how to theme it, or whatever strikes my fancy. Plus I am starting to FINALLY learn PHP, so I plan on throwing some articles on that here as well. More things to write about, so stay tuned folks!

What are you guys learning? Let me know!

Coupon Code: webmachine

Then come back and lets talk…mmmmmkay?

Is it still awesome? I’m going to give you a ‘for instance’ here. Let’s start with…the address tag. When you hear “address” tag, what do you think of? What would you put in this tag? Before you read that article, you probably thought “Well, the freakin’ address you idiot!” Guess what though? You would be wrong. Quoted from the article:

“The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)”

Through a bunch of searching and head scratching I finally found an awesome example. Let’s say I create a page about contacting Senator Stupid about Health Care Issue #1, the address tag should contain MY contact information. Now let’s say Senator Stupid has his own page about Health Care Issue #1, then HIS contact information would go in the address tag.

Confusing? YES! The address tag is for information concerning the article/page whatever, NOT the postal address of whoever owns the site…or whatever. UNLESS of course it pertains to the article/page itself. STUPID! This kind of crap bugs me.

I thought HTML5 would be for people to read the actual HTML more easily. These new tags though (although I’ve read the address tag has been around since the beginning) have all these crazy rules. Like when you can use the aside tag, how to structure the sections so that it creates a specific outline, and other such craziness. If anything, HTML5 has complicated the HELL out of everything.

I guarantee that when this is fully adopted, 90% of the web developer population will be using half the tags in the wrong way. They will think, address tag, that MUST be where I put my address. The section is like the left side, the right side, top and bottom. The nav is for any navigations…

Wait…now you are thinking “Um…isn’t it?” Ya….here’s another quote from the w3:

“Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.”

The word “need” there confuses the crap out of me. I want a yes or a no. Do I put all navigations in the nav tag or not?? Apparently if it is in the footer tag, you can do without it. So really, I am lead to believe that there is only one place for the nav tag, and that is the main navigation on the page. If I have 2 or 3 sub navigation areas, these apparently do NOT go in a nav tag. Do they? How many people do you think are going to read the w3 document? And how many nav tags do you think you will see on a bigger page? On the ones I work for at work, I can count at least 4 spots where someone would put that tag if they were not aware of the “rules.”

If you reaaally want to see how confused people are just on the address tag, go read and start laughing at the comments on this article.

When you have done that, you will realize NO ONE knows what the hell we are in for. I certainly don’t. After reading the w3 HTML5 page, I am scared that even they don’t know what they are talking about.

NOTE: I should have titled this “HTML5…why we are all f#@$ed!”