HTML5 Video and Audio Force-Fallback Javascript

Recently I have been looking on the web for a decent force-fallback script, but unfortunately I just couldn’t find a script that satisfies me, so I decided to write my own script.  The script below requires jQuery, which wordpress happens to include, I find the script almost perfect, it works on most browsers and it even works on mobile devices as well. If the script does not detect a compatible format it will do a force-fallback. I also included this script in one of my wordpress plugins (HTML Video and Audio Framework 1.7.0 and later)

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.

Posted in General | Tagged | Leave a comment

First VLog in awhile!

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.

Posted in General | 1 Comment

Metroid Other M

Too sexy not to include.  It just a shame I don’t own a Wii.

Download Video: Closed Format: MP4 Open Format: WebM

Posted in General | Tagged , | Leave a comment

Change of Fonts

I have got tired of those so called web standard fonts, or in other words the font that are installed on a majority of computer systems such as Arial or the dreaded Verdana (it takes up alot of space), gladly things have change now, majority of web browsers have added support for CSS ‘@font-face’, which allows web designers to add their own font; the only downside is that there is not a single format that will work on all platforms, for example TrueType works well for Windows browsers, WOFF  is a newer format and is currently supported by Firefox 3.6+, will be supported by Google Chrome and Apple Safari and technical preview of Internet Explorer 9, WOFF is very similar to EOF but is compressed and lightweight.  Internet Explorer 6 and above support EOF, while Chrome, Safari and Opera support a straight TrueType and OpenType font, but Mobile Safari only support SVG font, which applies to iPod Touch, iPhone and iPad.

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.

Posted in General | Tagged , | Leave a comment

Pair of Swords

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

Posted in General | Tagged , , | 1 Comment

Monday Night Combat (720p HD)

The game looks like fun actually, sadly I don’t think I will get the time to play as I hardly have the time for XBox 360 and mostly I play games on my PC, it just ashamed that this game is not going to be available on the PC.

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.

Posted in General | Tagged , , , | 2 Comments

Bioshock Infinite (720p HD)

I like the idea of having a new setup, have it in the sky rather then a underwater utopia. Even the Big Daddy seems different, you’ll notice the heart!

Download Video: Closed Format: MP4 Open Format: WebM

Posted in General | Tagged , , | 2 Comments

High Definition Video (720p)

Just testing that all, this should work with Safari, iPad, iPhone 4(due to bug http://rakaz.nl/2010/06/problems-with-html5-video-codec-detection.html) and for other browsers Flash is required for proper fullscreen support!  Make sure you click the fullscreen button.

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.

Posted in General | 14 Comments