jQuery – Creating Elements Part II: HTML5 Data Attributes

jQuery – Creating Elements Part II: HTML5 Data Attributes

Just when I think HTML5 sucks…

It still annoys the crap out of me, but there are some cool things in there. I just hate when people throw that word around like “We want to redo this flash to be HTML5.” What the hell does that mean exactly? And if you ask them, they have absolutely no idea. Its just a buzz word they are throwing around trying not to sound like they are out of touch. On a current project that I am working on, I came across a problem I needed to solve.

I needed to load videos on a page using the HTML5 video tag, with a flash fall back. The problem though is that there were about ten of them on the page, and the browser was reading the source tags and loading them. If this were just one video, this wouldn’t be a problem, but there were more and it was slowing things down.

The Solution

Which was to load the video on the fly when the flyout was triggered, but I needed to figure out how to get the right video to go with it. This is how I solved it.

As usual we’ll start with the HTML. First we have the link that will open the modal window. You don’t need to see the javascript that actually controls the modal, cause you can figure that out on your own. DO pay attention to the attributes on them.

<a href="#" class="video-ibanez" rel="#video1" data-idvalue="v1" data-url="Ibanez">Ibanez Guitars</a>

And the div that will contain the video:

<div class="simple_overlay" id="video1"></div>

Now for the javascript, aaaannnnnd then we’ll explain it. Cool? Zang.

$('a[rel]').click(function(){
		var newId = $(this).attr('data-idvalue');
		var videoUrl = $(this).attr('data-url');
		var appendId = $(this).attr('rel');
 
		if ($(this).hasClass('video-ibanez')) {
			var guitarName = "ibanez";
		} else if($(this).hasClass('video-peavey')) {
			var guitarName = "peavey";
		} else {
			var guitarName = "dean";
		};
 
		$('<div class="video-holder">').appendTo(appendId).attr('id', newId).html(
			'<video class="stop-video" height="360" width="640"  controls>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.mp4" type="video/mp4"></source>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.webmvp8.webm" type="video/webm"></source>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.theora.ogv" type="video/ogg"></source>' +
			'<embed src="videos/' + guitarName + '/' + videoUrl + '.swf" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed>' +
			'</video>'
			);
	});

Shiny HTML5 data attributes

Let’s go over the three variables. First off is ‘newId’, which we are setting to the value of clicked link’s HTML5 data attribute ‘data-idvalue. So if you clicked the ‘a’ tag above, newId would be set to ‘v1′.

The second variable, ‘videoUrl, is set to the clicked link’s data attribute ‘data-url’, and finally the third variable, ‘appendId’ is equal to the ‘rel’ attribute.

HTML5 data attributes are cool, and I will quote John Resig, where he says:

“Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation).

This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page.”

So what am I using them here for? Well, let’s go over the next section, and eventually we’ll get to that. But we need to explain this before hand:

if ($(this).hasClass('video-ibanez')) {
			var guitarName = "ibanez";
		} else if($(this).hasClass('video-peavey')) {
			var guitarName = "peavey";
		} else {
			var guitarName = "dean";
		};

Let’s build the video

This is simply setting a variable based on what class the link that was clicked, has. So if the link clicked has the class ‘video-ibanez’, then the variable ‘guitarName’ is set to ‘ibanez’. If it’s class is ‘video-peavey’, then ‘guitarName’ is set to ‘peavey’. Otherwise, ‘guitarName is set to ‘dean’. Got it? Good.

Now comes the juicey part. Creating the video tags that will be inserted once you click the link.

$('<div class="video-holder">').appendTo(appendId).attr('id', newId).html(
			'<video class="stop-video" height="360" width="640"  controls>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.mp4" type="video/mp4"></source>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.webmvp8.webm" type="video/webm"></source>' +
			'<source src="videos/' + guitarName + '/' + videoUrl + '.theora.ogv" type="video/ogg"></source>' +
			'<embed src="videos/' + guitarName + '/' + videoUrl + '.swf" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed>' +
			'</video>'
			);

Right off the bat, we create a div element with a class of ‘video-holder’. Done. Where do we stick it? Easy, within a div whose ‘id’ is equal to ‘appendId’. Which if you have been paying attention, was set to the ‘rel’ attribute of the link that was clicked. In this case is ‘#video1′.

Then we’ll give the newly created div an ‘id’, just in case we need it. The attr(), sets the ‘id’ to the variable ‘newId’, which is where…FINALLY…we see the first HTML5 data attribute we used. If you go back and look at the link at the top, you’ll see I set ‘newId’ to be the clicked link’s ‘data-idvalue’ attribute’s value. Which in this case is ‘v1′.

Enter the source tags

Finally we need to build the source and embed tags. The meat of the HTML5 video elements. I’ll go through the first one, and I’m confident you can figure out the others. Because we know you aren’t stupid.

The video tag is the same for any of the video created this way, at least in this case. They all get the same class, height, and width. The source tags though are what determines where the actual videos are located.

Take note here…the mp4 video should go first. This is because of an issue in iOS 3.2 not recognizing anything but the first source element. Now, how many people are actually still using that iOS? Probably not many, buuuut you never no, and it is a simple thing to do. If you have any questions on getting HTML5 video working though, Mark Pligrim kicked ass with this very informative page.

Back to the source element. The only thing we have to worry about is the ‘src’ attribute, so it knows the correct video to play. You will notice that the path starts with ‘videos/’ and then adds ‘guitarName’ to the path. Well, we figured that out when we asked jQuery to find out what the clicked link had as a class. In the given link example, this is set to ‘ibanez’.

Then we add this to the path: the ‘videoUrl’ variable, which was set at the beginning when the link was clicked, to the link’s ‘data-url’ attribute. In this case, that is ‘Ibanez’.

The final path then, when all that is put together, looks like this:

<source src="videos/ibanez/Ibanez.mp4" type="video/mp4"></source>

It then writes the other source elements for the ‘webm’ and ‘ogg’ video types, and one embed element for the flash.

Now get rid of the damn thing

Well, now that we created that, we actually have to remove it. Why? Because we are using one container to hold the ‘video-holder’. And we don’t want to keep adding a bunch of video tags to it each time a link is clicked that triggers this whole thing. We do that easily.

Add a link in the modal to close it (most have that already built in), and when its clicked, remove the ‘video-holder’ element we created to hold all the video information.

$("a[rel]").overlay(function(){
		$('.close').click(function(){
			$('.video-holder').remove();
		});
	});

BOOM! Done.

On the seventh day, the front-end developer took a break

This is just what I had to do, now go use that for something entirely different. I created elements, and used HTML5 data attributes to set variable information. I hope I set your mind going and got you to think a little differently by seeing something you might not have thought of.

If you have used HTML5 data attributes before, leave a comment below and let me and the readers know what you did!

Tags: , ,

Leave a Reply