First, let’s take a look at the HTML5 video tag:
It just couldn’t be any sweeter! As simple as it is, we still need to add some guts in order to get it to work. First we need to add the playback controls to our video player. This is as simple as adding the word ‘controls’ inside our opening video tag. The great thing about HTML5 video is that the browser handles all the functionality and display of the controls behind the scenes. Just be aware that each browser handles the controls a bit differently. For example, a fullscreen button is available directly in the player controls in Safari, whereas in Firefox, the user must right-click to bring up the fullscreen option.
Next we need to specify the source of the video we would like to display. Currently, HTML5 supports three video types, mp4, webm, and ogg. Since the majority of video on the web is found in the flv format, you will most likely need to convert your flv video to mp4, webm, and ogv. A number of video conversion tools can be found on the web. Personally, I like to use the Miro Video Converter. It’s free, super easy to use, and can convert almost any video to MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and more.
In order to ensure that our video is accessible in all major browsers, we need to include the source to mp4, webm, and ogg formats. Here is the final code with a custom fallback message that will display if the user’s browser does not support HTML5 video:
<video controls> <source src="http://video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="http://video.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="http://video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video>