Category: Online Resource

Cross-browser HTML5 video tag with fallback for Flash users

Apple’s lack of support for Flash on the iPhone and iPad has forced people to reconsider the value of HTML5 and its video tag. It’s no longer something to put off until the future. However, adding HTML5 video support to your site AND continue to provide a Flash option for older browsers (I.E.) is not as simple as you might expect.

While the video tag has been standardized, there is a lack of consensus for supporting the codecs used to package the videos for distribution and playback. Some browsers are supporting the OGV format, some support the more popular but licensed mp4 format. Others, such as Chrome, will support both. To make it even more exciting, there is a new version under development to make a truly open-sourced format: WebM.

This means your video tag needs to define multiple movie sources to make it playable on all browsers. It sounds complicated because it is. Luckily, Kroc Camen has written a great article and code pattern for adding a cross-browser video tag with fallback to Flash for the older browsers: Video for Everybody!.

The article is full of great advice from a programmer that has learned the stuff the hard way. Here’s an explanation of how you’ll need to adjust your htaccess file.

Ensure your server is using the correct mime-types. Firefox will not
play the OGG video if the mime-type is wrong. Place these lines in your .htaccess
file to send the correct mime-types to browsers 

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Video for Everybody! – Kroc Camen

Related Resources

Dive into HTML5 should be everyone’s intro to the standard

I just found out about the Dive Into HTML5 tutorial. It’s downright amazing. I wish all specs were so carefully described. Don’t miss the first chapter on the history of standards creation. It gives you a good understanding of why the HTML standards are quirky and why HTML5 is progressing the way it is.

I especially like the way they test your browser for its ability to handle the various components you are reading about. Take an hour or so to go through this tutorial. It’s the best read you’ll have for the week.

Another good tutorial is The Best HTML5 Slides Ever, but you’ll need to view it in Safari. It doesn’t work well in the standard Firefox and forget about IE.

Related articles by Zemanta

HTML5 Helpful Links

I’m starting to hack away at HTML5 and I’m finding that I need to start bookmarking more and more pages. There are lots of good resources out there. Here are a few:

Related articles by Zemanta

New Yahoo! BOSS Hacks web site

There’s a lot of information about Yahoo! Boss on the official site: Yahoo! Developer Network. However there is still a need for a more informal portal for quick reviews of BOSS-based mashups, helpful hints, techniques, and upcoming events.

BOSS Hacks is an unofficial Yahoo! BOSS Site that does exactly that. I started it last week as I noticed this site was becoming less about standards based markup and more about how I was working with Yahoo! BOSS.

This site will feature shorter, more succinct blog posts. I’ll save any large posts for the YDN blog. Please feel free to visit the site and send me notes about what you would like to see or any new BOSS-based sites that should be mentioned.

Related articles by Zemanta

Quick and Free Online PDF Creator

I needed to create a .pdf document for a paper submission to an upcoming conference. Unfortunately I do not have Acrobat Writer on m laptop so I needed a quick fix.
PDF Online has a very simple tool for generating .pdf documents: Doc2PDF.
you simply upload your document, give it a name, your email address and its delivered in less than a minute.

Related articles by Zemanta