HTML5 video

Video players can be added to an HTML document. This post will explore how we go about doing this.

Default video player controls

The default view for the player in different browsers is as follows:

Markup

To add video to a page, the markup should look as follows:

<video controls preload="auto" width="360" height="240" poster="previewimage.gif">
    	<source src="videofile.webm" type="video/webm" />
    	<source src="videofile.ogv" type="video/ogg" />
    	<source src="videofile.mp4" type="video/mp4" />
    	<object type="application/x-shockwave-flash" width="360"height="240" data="player.swf?file=videofile.mp4">
        	<param name="movie" value="player.swf?file=videofile.mp4" />
    	</object>
    	<a href="videofile.mp4">Download video clip</a>
</video>

Video tag attributes

Various attributes can be added into the video tag:

• controls: Playback controls for the video are displayed.
• width=“number” and height=“number”: The width and height of the video can be set here.
  Note: the video will retain its aspect ratio. This is especially evident in IE, where the video will become letterboxed if the size isn’t set correctly. Either just width or just height can be used, and the other dimension will adjust accordingly
• autoplay: The video plays upon page load without any input from the user.
• loop: The video plays endlessly.
• poster=“previewimage.gif”: A preview image can be inserted to be shown before the video is played.
• preload=“value”: Values in the quotes can be none, auto or metadata. none ensures that the video isn’t preloaded, auto ensures that the video is preloaded, and if metadata is added, only the metadata of the video is loaded.
  Note: In IE9, the preview image won’t show if preload is set.

File formats for different browsers

So that the video will work in multiple browsers, the following filetypes must be added as sources within the video tags:

• .webm file, which will work in Firefox 4, Google Chrome and Opera 10.6.
• .ogv file, which will work in Firefox, Opera and Chrome.
• .mp4 file, which will work in Firefox and IE9.
• .mp4 file for IE8, which needs to be supplied via Flash.
• A link to the video file can be provided as a last resort after the source declarations, and any browsers that don’t support the audio content will show the link instead. Similarly, a text transcript can be placed here.
• Video files can be converted with Miro Video Converter.

Video player with custom controls

By interacting with the media API with Javascript, we can style up the buttons in a different way to the default player. Here is a very simple example using styled links:

Markup

<video id="videoPlayer" preload="auto" width="360" height="240" poster="images/previewimage.gif">
    	<source src="videofile.webm" type="video/webm" />
    	<source src="videofile.ogv" type="video/ogg" />
    	<source src="videofile.mp4" type="video/mp4" />
    	<object type="application/x-shockwave-flash" width="360"height="240" data="player.swf?file=videofile.mp4">
        	<param name="movie" value="player.swf?file=videofile.mp4" />
    	</object>
    	<a href="videofile.mp4">Download video clip</a>
</video>
                
<div>
    	<a onClick="document.getElementById('videoPlayer').play()">Play</a>
    	<a onClick="document.getElementById('videoPlayer').pause()">Pause</a>
</div>

The video player can be styled!

Unlike with a Flash plugin, we can add styles to the video player, so we can style it using CSS. Here is an example using CSS3 rotate and skew:

Video player using jPlayer

jPlayer is a jQuery plugin, which does pretty much all the hard work for us, and lets us skin the video player however we want (view the demo source to see how this was integrated). Here is my styled version: