published on 11.07.2009 12:12.

Cross-browser video support with HTML 5

Embedding video is easy in HTML 5, use the native <video> tag. Firefox 3.1+, Safari 4+ and Google Chrome (Windows) already have experimental support for it.

The HTML 5 spec does not specify which video format and codec should be used, so naturally ;-) the browser vendors have picked different formats. Getting videos to play cross-browser still is no problem, since the <video> tag can contain more than one source. So give an ogg and a quicktime version of the video, and all browsers currently supporting the <video> tag will be happy.

Example

The code
<video controls width="320" height="240">

  <!-- Firefox 3.1+, Google Chrome -->
  <source src="/files/swiss.ogg" type="video/ogg">

  <!-- Safari 4+, Google Chrome -->
  <source src="/files/swiss.mov" type="video/quicktime">

  <!-- All others (including Internet Explorer and Opera) -->
  Sorry, your browser doesn't seem to support the <code>video</code> element.

</video>
How to create the video formats (OS X)

Easy. Use Quicktime Player’s export feature (File > Export). But first get the xiph Quicktime Components to add .ogg support to Quicktime.

Posted in ,  | Tags , , ,  | no comments | no trackbacks