My Dad is Missing

I don't usually use this space for personal musings, but this is an important one to me. My Dad has been missing for a month now, leaving his house in Surrey on April 2nd, and his car was found in Cornwall one week later, although it could've been there since the day he left. John Barnett: Missing

Realistically, he could be anywhere by now and we know nothing of his whereabouts or intentions. Please help us spread the word and get his face known to as many people as possible by sharing the link below on your social networks of choice.

http://johnbarnettmissing.tumblr.com

Your support is greatly appreciated.

Using HTML5 Canvas for Image Masks

Recently I've found myself referring to Jake's (the bastard legend that is) HTML5 Video with alpha transparency demo for reference into some pixel manipulation techniques with Canvas. Used in a slightly different context, but largely the same technique, we can use Canvas to apply a full alpha mask to any image element.

For Webkit browsers, a similar effect can be used with CSS Masks, but perhaps you need slightly wider browser support, or you want to use the masked image in Canvas somewhere else.

This function is just a base and should really be tailored to your use case, but it shows how easy it is to read the alpha data from one image, and apply it to another. Using getImageData, a 4-chunk CanvasPixelArray is returned with each pixels' R, G, B, and A values. The result is achieved reading and 'merging' the RGB values from the base image, and the A values from the mask.

That's all it does, but having it wrapped up into a single function is sometimes easier to work with (again, depending on your use case). The function creates a couple of Canvas elements on the DOM and uses them to mash the pixels together. You just pass in the base and mask images, and get back the single masked image either as a CanvasPixelArray, or as a Base-64 encoded data URL.

To give you an idea of what the images can be, here are the raw images I'm using for the utterly useless demo.

Feel free to head over to the Github repo for further docs.

Adding Selector Support to jQuery.get() to get page fragments

Just wrote a little plugin whilst working on a project because I keep finding myself using this functionality and having to write a handler in my application code. This plugin can be dropped in, just like jQuery Animate Enhanced and weighs in at less than 1KB, and it will enable you to quickly grab a partial or fragment of the AJAX endpoint. Here's some dummy code:

There's not really much more I can say about this. Its unobtrusive, light weight and will simply hand over to the native jQuery.get() method if no selector is supplied.

Further Resources

Skinning the YouTube Player with HTML5 Video Support

Where we are now

So it seems that the YouTube Player API doesn't offer any support for the HTML5 video player, while the standard Embed code does. It kinds of makes sense with the way they've implemented their player API as ultimately it's just embedding a SWF with a few paramaters, but its still annoying. Its clear that the major players are working towards something, but for now we're left with finding our own way through.

The reason its annoying is that the only way to truly skin the YouTube player (without its hideous & pointless background colour customization) is to use the Chromeless player and then overlay your own controls. This is relatively easy to do, and a there's a reasonable demonstration on the YouTube Player Demo page.

What's the point?

The point is so that you can have a custom YouTube player, and have it work on mobile devices without Flash. It also means that you get the benefits of YouTube's encoding lair and that the number of 'Views' will be counted both on YouTube and from your site.

Making it work

As we need SWFObject on the page in order to embed the Chromeless player for our custom skin, we can use a handy method in its API:

swfobject.hasFlashPlayerVersion(versionStr) // e.g. "8.0.0"

With that, we can do a simple if statement, and hand the logic back to the standard YouTube embed code should that function return false. We do this because the basic embed code will use the HTML5 player where it can, giving us native iPad/iPhone/iWhatever support. You can grab this simply by going to YouTube, clicking Embed, and copying the code it gives you.

Either way, we palm off to YouTube at this point, allowing them to make the correct decision in a non-Flash environment, the logic behind which will probably change quite regularly.

Note: it's not possible to skin the HTML5 Video Player on Mobile Safari, because it uses the native video player. Not a biggie though, it looks awesome.

Here's a basic code example:

Demo

This is ugly, rudimentary and not for production. But it demonstrates the technique. Try the link below out on any browser, and on an iPad/iPhone:

http://clients.brushfiredesign.net/playground/youtube/youtube.html

You'll see that with some basic styling, you can fairly easily create a completely custom player design using the elements on that page, which also works on your iPad.