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.

WebM MPEG-4 Ogg
Internet Explorer Supported
Firefox Supported Supported
Chrome Supported Supported
Safari Supported
Opera Supported Supported

This means that we have to convert our videos into two formats if we want everyone to be able to watch them. If we also want to fall back to Flash for older browsers we need to keep every video in three formats. I have created an example page where you can see the video tag in action.

<video width="160px" height="120px" 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.

Ogg MP3 Wav
Internet Explorer Supported
Firefox Supported Supported
Chrome Supported Supported Supported
Safari Supported Supported
Opera Supported Supported

I have created yet another example page where you can see the audio tag in action.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s