Hello, my name is Ren Provey.
I am a full stack web software developer with a deep interest
in iOS, user experience and
analytics.

AV Club — HTML5's New Audio and Video Tags

They have been a long time coming, but HTML5 will finally introduce native, standardized playback with all the accompanying JavaScript support.

HTML5 Audio Tag

<audio src="happyhappyjoyjoy.mp3" controls></audio> — Like many HTML5 tag attributes, by simply being there, controls is true. Something like controls="false" would still display controls (we're looking at if the attribute exists, not what it is set to). If you don't want them, just leave controls out.

The preload attribute can be set to one of the following:

  • none — don't preload until specifically asked,
  • auto — preload as much as possible,
  • or metadata — (default) load metadata and first frame of video.

Other attributes are autoplay and loop. For obvious reasons, never tell anyone that either of those exist.

<audio> also has a long form for specifying fallbacks when an audio format is not supported:

<audio controls preload="none">
  <source src="happyhappyjoyjoy.mp3">
  <source src="happyhappyjoyjoy.ogg">
</audio>

At this point in the discussion, HTML5 For Web Designers author, Jeremy Keith, has a cheeky little bit about OGG not being "crippled" by software patents, so I'll add a cheeky little link here. Good luck finding the comments section!

HTML5 Video Tag

Video is very similar with a few extra helpful attributes:
<video src="happyhappyjoyjoy.mp4" controls width="300" height="200" poster="placeholder.png"></video> — all those should be self explanatory, poster is what allows you to specify a placeholder image.

In long form to allow specification of fallbacks:

<video controls width="300" height="200" poster="placeholder.png">
  <source src="happyhappyjoyjoy.mp3">
  <source src="happyhappyjoyjoy.ogg">
</video>

Notes

960.gs Series

HTML5 Series

Jekyll Series

Git Series

Around the Web

Twitter: @renprovey
LinkedIn: Ren Provey
GitHub: ren
Work: CityBits, the guide to all the bits of your trip that you'll rave about to your friends.

Places worth visiting

David Eisinger
Memorly