Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ALA HTML5 Video snippet, with fallback
<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>
<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>
@murtaugh

This comment has been minimized.

Copy link
Owner Author

murtaugh commented Mar 6, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.