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.
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>
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.
I have created yet another example page where you can see the audio tag in action.