ALA HTML5 Video snippet, with fallback

1. ala-video-with-flash-fallback.html

<figure>

<video controls poster="">

<source src="http://alistapart.com/d/better-navigation-through-proprioception/foo.m4v" type="video/mp4" />

<source src="http://alistapart.com/d/better-navigation-through-proprioception/foo.webm" type="video/webm" />

<!-- fall back to flash — use the "Video For Everybody" generator for this: http://camendesign.com/code/video_for_everybody -->
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="" height="">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Falistapart.com%2Fd%2fbetter-navigation-through-proprioception%2Ffoo.m4v','autoPlay':false}]}" />
</object>

</video>

</figure>

2. ala-video-with-image-fallback.html

<figure>

<!-- for something like a screencast, autoplay and loop are ok. for anything with sound: no. -->
<video controls autoplay loop>

<source src="http://alistapart.com/d/misc-images/comment-edit.m4v" type="video/mp4">

<source src="http://alistapart.com/d/misc-images/comment-edit.webm" type="video/webm">

<!-- fall back to a simple image -->
<img src="http://alistapart.com/d/misc-images/comment-with-edit.png" alt="screenshot of a comment with a cursor hovering over the new edit button">

</video>

</figure>

This is just an example — ALA producers should be using the Video For Everybody Generator, and adding the figure tag.