jQuery('video').each(function() {
		var support = false;
		jQuery(this).children('source').each(function() {
			if(support == false) {
				var type = jQuery(this).attr('type');
				try {
					support = document.createElement('video').canPlayType(type);
					if(support == "") {
						support = false;
					}
				} catch (e) {
					// Do nothing
				}
			}
		} )
		if(support == false) {
			jQuery(this).children('source').remove();
			jQuery(this).children().insertBefore(this);
			jQuery(this).remove();
		}
	}
)

jQuery('audio').each(function() {
		var support = false;
		jQuery(this).children('source').each(function() {
			if(support == false) {
				var type = jQuery(this).attr('type');
				try {
					support = !!document.createElement('audio').canPlayType(type);
					if(support == "") {
						support = false;
					}
				} catch (e) {
					// Do nothing
				}
			}
		} )
		if(support == false) {
			jQuery(this).children('source').remove();
			jQuery(this).children().insertBefore(this);
			jQuery(this).remove();
		}
	}
)

The script does not care about the class name or the id, all it cares about is the element (video and audio) and the type attribute in source element.

No video playback capabilities, please download the video below

Download Video: Closed Format: MP4 Open Format: WebM

Yes I was interrupted, I was going to say something at the end and I thought ah forget it.

Use your own font?

Check out http://www.fontsquirrel.com/fontface/generator

Update: I have also tested this within Ubuntu, the only different between Windows and Ubuntu was the way how the font is anti-aliased, putting that aside, it was fairly consistent between the two and that one thing that important to web designers, consistency, I guess that would be one advantage of supplying your own font.  I’m pretty sure the Mac would be pretty similar to the Ubuntu way.

Illustrator isn’t hard as anybody thinks, you just have to try, trust me!

The Trailer

Download Video: Closed Format: MP4 Open Format: WebM

New Laser Shaver

Download Video: Closed Format: MP4 Open Format: WebM

Ammo Mule

Download Video: Closed Format: MP4 Open Format: WebM

Credit goes to Thomas Williams for the videos.

Download Video: Closed Format: MP4 Open Format: WebM OGG

Update: When adding this video, I also discovered a fatal error, I didn’t notice this easily because the testing environment was running PHP 5.3, while the production environment (this blog) was running PHP 5.2.  The function “array_replace_recursive” exists in 5.3 but does not exist in PHP 5.2, anyway I have fixed the problem.  As you can see from above it running properly.

• Degradable HTML5 audio and video
• External “Video for Everybody”
• Projekktor Video Tag Extension
• Universal Video
• HTML5 and Flash Video Player

What all those plugin have in common is that they all focus on efficiency rather then flexiblty, I haven’t seen any of them use Object Oriented concept, just plain old functional programming in PHP which often result in very messy coding sometimes without comment, practically making the code even harder to understand.  With Object Oriented PHP I can easily produce code with self-explanatory method names which should make use of comment unnecessary, I can also produce reusable code which can make integrating one plugin to another with less hassel and I actually have done something just like that.  I have produce two WordPress plugins that take advantage of the Object Oritented concept as well other concept such as JSON (Projekktor does use JSON but in a different way) within syntax.  The two WordPress plugins are,

• HTML5 Audio and Video Framework for WordPress
• Autoembed Plugin for WordPress

They both support integration with each other, I can use the “Autoembed Plugin for WordPress” to produce a YouTube object code with html5 video fallback thanks to the integration support it has with “HTML5 Audio and Video Framework for WordPress”, which can be used to do vice versa, but the framework also has comprehensive support for Flowplayer, except for the jQuery part because I wanted a pure PHP/HTML solution because I hate the idea of using JavaScript to embed Flash Video, yes the framework can also produce the Flowplayer embed code with HTML5 Video or Audio fallback, enhancing support for mobile devices.

The Framework also support all attribute for HTML5 Video and Audio, even if the attribute is not on the HTML5 specification, as for the others the attribute are quite limited compared.

To be really honest I don’t think I would find a similar WordPress plugin that comes just as flexible or complete as mine.  If you do come across one? contact me!

There are two other method to YouTube iFrame that will also bring mobile compatibility by providing fallback in html object, is not limited to YouTube, does not rely on JavaScript and passes HTML5 specification.

Link and Image as HTML Object Fallback.

The only problem with this method is that it can steal traffic from your site especially with mobile devices such as the iPhone.

HTML5 Video as HTML Object Fallback.

Download Video: Closed Format: MP4 Open Format: WebM OGG

The problem with this method is bandwidth consideration and where to get the sources for HTML5 Video.

Anyway I hope this was an interesting read, have a nice day. =)

h.264 baseline

Well I have to say I’m quite impressed with the VP8 format, the video quality of that format is quite comparable to the h.264 baseline format, I have notice that there are a few minor quirks with WebM, but still I think it’s good for the web and I’m sure that Google will iron out those minor quirks. But anyway WebM is looking awesome right now, but now for the video size comparison with the link to the video.

• M4V – 640×368 h.264 at 500kbits (x264), LC-AAC 128kbits (FAAC) – 44.9MB (Blame FAAC).
• WebM – 640×368 VP8 at 500kbits, Vorbis 96kbits (AoTuV) – 43.5MB (Gotta Love AoTuV).

Yes it is possible to archive a slightly smaller filesize in WebM compared to M4V at the same video bitrate, thanks to AoTuV but 96kbits is actually an overkill, AoTuV post beta 5.7 can achieve transparent audio around 48-64kbits, beating LC-AAC, HE-AAC is better at that bitrate but too complex and don’t mix well with video due to compatibility issues with mobile devices.

I have used Handbrake to encode m4v and mkv (h.264 60% constants quality and vorbis (AoTuV)), I use the latest build of FFMpeg to encode mkv to WebM (h.264 to vp8, audio on copy).

No video playback capabilities, please download the video below

Download Video: Closed Format: MP4 Open Format: WebM OGG

As the title says!

I been working on the HTML5 Player Plugin for WordPress, it’s started off as a simple plugin that used quicktags [video:url.m4v|url.ogv image.jpg width height] and there were no advanced options until I decided to disable “SWFObject” by default after that I started having a bit of ideas, releasing different version within the first week (0.9.2, 0.9.3, 0.9.4), then added quite a few advanced options enough to allow users or client to to integrate JavaScript libraries to the <video> or <audio> tag and then released that as well also within the first week (1.0.0, 1.0.1).  I honestly think I have progressed a bit too quickly, heck I even made a bloody logo, you can guess where those bloody arrows have came from?  If you thought the logo came from <video> or <audio>, then you thought correctly because that what the logo was based on. I hope I didn’t cause disruption to other bloggers, if I did I apologise about that.  Anyway I just leave a video behind for you guys and girls to watch, so bye bye, see ya later!

Download Video: Closed Format: MP4 (Main) MP4 Open Format: WebM OGG

“Just a logo I created for the facebook group, it took me about one hour to complete, I think emsley was chuffed about this to be honest!”

No video playback capabilities, please download the video below

Download Video: Closed Format: MP4 Open Format: OGG

Just testing HTML5 video again, I finally found a way to make it work with quite a few browsers.

Audio Test

That would make a good t-shirt or maybe even a tattoo.