Video goes native

With HTML5 we get native support for video. We no longer have to rely on third party plugins such as Flash. All current browsers have support for the video tag but unfortunately they can’t agree on what formats to support.

Thankfully they all support MPEG-4 today. If we want to fall back to Flash for older browsers we need to keep every video in a second format as well. Below you can see the video tag in action:

<video width="160" height="120" controls poster="tractor.jpg">
  <source src="tractor.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="tractor.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  Video tag not supported
</video>

In this example we set up a video with two sources. We specify the dimensions of the video to help the browser out just like we do with images. The controls attribute means that the browser will show its native controls for the user to control playback, set the volume etcetera. There is also a JavaScript interface for playback that you can use if you want to create your own controls.

The poster is an image that will be used as a placeholder until playback has been started. It should of course have the same dimensions as the video. In case the browser does not support the video tag we inform the user about it with a message. If we wanted to use a Flash player as a fallback we would have put it here instead of the message.

For each source we specify the MIME type and the codecs used. This way the browser doesn’t have to download the file to determine if it can play it. You must also make sure that your web server provides the correct MIME type in the Content-Type HTTP header or it might not work properly.

Sound as well

HTML5 also have a new audio tag that works the same way. Again the browsers can’t agree on what formats to support.

Although they all support MP3 today. Below you can see the audio tag in action: