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

RNIB releases guidelines for accessible Flash banner ads

The Royal National Institute of Blind People has just released a set of guidelines for building accessible Flash ads. While these are aimed at ads, there’s no reason you can’t use the same guidelines in all of your Flash projects.

  1. Provide a text equivalent for the animation.
  2. Provide an alternative for the Flash animation
  3. Readability
  4. Looping and blinking
  5. Test your move
  6. WCAG compliance
  7. Navigating Flash with a screen reader

See the full article for more information on these Flash accessibility guidelines.

Storyboard your DHTML interactions

Bill Scott - AJAX GodBill Scott gave an interesting lecture today at Yahoo! about AJAX design patterns. He explained how good AJAX designs keep the user’s attention on the page, remove roadblocks, and increase stickiness to a site.

Patterns of successful AJAX behaviors are beginning to appear (Netflix, 37Signals, Yahoo!). There are subtle, and sometimes not so subtle, changes that can occur to let a user know that an action has happened.

storyboard for AJAX interactionsDownload the drag and drop storyboard design package

For instance, he pointed out an interaction on the recently departed Yahoo! Photos site. A user could select multiple photos and then drag them to special collection folders. The page generated several panels to let the user know that the move would go to the preferred folder (hit yes), wait for the action to finish, and then a final congratulations panel (hit yes). These panels and the two required clicks could have been avoided if the folder changed when the photos were dropped into it. This could be a simple glow and maybe the number of photos in the folder is increased.

Plan your entire sequence in advance

Eric Miraglia coined the phrase Interesting Moments to describe the multiple changes that occur during an AJAX/DHTML action.

In most cases, Drag and Drop requires that you write code to respond to the interesting moments in the interaction: when the drag event starts, when the dragged object enters another object, and so on.
Yahoo! UI Library: Drag & Drop – Interesting Moments

Your user will have a much more pleasant experience if these are considered in the beginning of production. The Yahoo User Interface library includes a storyboard template (.zip) for planning these interactions effectively. This story board concept also works well for forms (especially form validation actions) and Flash components.

Update

The YUI blog has posted a video of Bill’s lecture: YUI Theater — Bill Scott: “Designing the Rich Web Experience: Principals and Patterns for Rich Interaction Design on the Web”. This is a great opportunity to learn from one of the finest developers around.

Related articles

Comfort – the death of creativity

I had an art teacher, Walt Cotten, that would remind us to not get comfortable with our medium. As soon as that happened, our images would become stale and our creativity would plummet. He’d encourage us to throw our existing styles to the wind and try something completely different.

I’ve gotten comfortable with CSS. It’s like walking and chewing gum. I don’t check CSS Zen Garden every day for the latest design. I don’t seem to have the time to experiment with new CSS3 techniques. I’m getting stale.

So, what do I do? I’ve been working heavily in CSS, XML, and XSL for the past two years. It’s time to do something new. I’ve dabbled in adapting other people’s php code. I’ve dabbled in handheld style sheets. I’ve dabbled with RSS feeds and a million other things. My goals this year are to break into some new paths. I’m going to start building php pages from scratch, play around with Flash lite and other mobile applications, and delve into Internationalisation.

I’m starting from scratch with PHP. As soon as I finish my first project, I’ll document it on this site for the other CSS people out there looking for the base level tutorials. I know the frustration of asking for advice and having a PHP coder say “It’s easy, setup a parser, blah, blah blah……. and that’s it!”