News

An expert guide to HTML5 Video – part 2

In part 2 of our Expert guide to HTML5 video discover how to encode and serve video and embed with HTML5

HTML5Logo

The HTML5 audio and video API

The audio and video APIs allow you to control your media elements directly from JavaScript, making it easy to create custom user interactionsOne of the most useful aspects of HTML5 audio and video is that the specification defines an entire API alongside the actual elements.

This API allows you to control your media and react to user input. By providing programmatic access to properties such as the volume of playback, the audio track being played and the current playing state, the specification makes it easy to create your own skins for players, incorporating custom user controls.

The API provides access to methods such as play() and pause(), as well as less apparent options including playback rate (which allows you to slow down or speed up playback, or even play media backwards). You can also use the API to interrogate the media, getting information about the load status, current play-head position and volume.

A series of media events are fired in response to the loading and playing of media files, so that you can create listeners to react to an audio track playing, the user seeking within a file by scrubbing the play-head, or the video ending. You can get the full listing of API methods and properties by visiting the W3C documentation at bit.ly/19YmSEe, although increasingly it’s possible to use JavaScript libraries that simplify access and control without having to dig into the official specification.

Encode and serve your video
Video on the web needs to be encoded so that different devices and browsers can play it and different platforms need different encoding. Follow our steps to make it easy to output your content in the right format.

Choose a video size
Your video source will dictate the final file size, so it would be sensible to make sure you’ve got the final cut before you embark on encoding. You’ll also need to decide what size you’re going to show it at on-screen. Don’t encode at double the resolution you need, as you’ll end up almost quadrupling the file size!

Choose your formats
There are three principal formats as we’ve seen: MP4, OGG and WebM. Currently the safest option is to encode in all three, but if you’re choosing only one you’ll get the best compatibility from MP4. Adobe Flash will happily read MP4 files, allowing this to act as the fallback source too.

Encode with profiles
It’s important that you use the appropriate profile if you’re encoding in MP4. Mobile devices will only play base-level profile encoding, so think about your targets before encoding. Good tools for encoding include Adobe Media Encoder, Handbrake (handbrake.fr) or Miro Video Converter (www.mirovideoconverter.com).

Set up your server
Once you’ve got one or more video files, you’re ready to embed them within your page – but you’ll still need to make sure your server is set up with the correct MIME types to serve the video appropriately. If you’ve got a Linux-based server, simply add the code shown to your .htaccess file. Remember, If you’re on a Windows server, you’ll need to add the types to IIS.

 001 AddType audio/ogg ogg 
 002 AddType audio/ogg oga 
 003 AddType audio/wav wav 
 004 AddType audio/mpeg mp3 
 005 AddType audio/mp4 mp4 
 006 AddType audio/mp4 mpa
 007 AddType video/webm webm 
 008 AddType video/mp4 mp4 
 009 AddType video/ogg ogg 
 010 AddType video/ogg ogv

EMBED A VIDEO WITH HTML5

HTML5 video is actually pretty straightforward: there’s a basic set of HTML tags, and an API that allows you to specially craft your own unique user interface so you are able to match your site design exactly and nothing looks out of place. However, it is important to focus on making your video controls as intuitive as possible and if you’re only interested in getting your video to play, you can take a shortcut by using one of the many libraries available to quickly get your video in place on the page. In this tutorial we’re going to look at each part of the HTML required, and show you how to put a fallback for Flash in place.

Encode your video
First – and most importantly – you need to encode your video in formats suitable for the browsers and devices you’re targeting. Mobile devices tend to have H.264 decoding chips, and all the major browsers with the exception of Opera now support this format, so at a minimum ensure you’ve output an MP4 file.

The basic HTML
Assuming you’ve now got your video uploaded to your server, and you’ve also set your MIME types correctly (see the tutorial on page 74 for more in-depth detail about encoding your video), you can start embedding your video with a simple HTML tag: <video>. Add the following quick line of code shown to embed your video, and make

sure you remember to test your page in the browser and see that it actually works!
 001 <video src=”video.mp4” width=”320”     height=”240”></video>

Multiple sources
The code we’ve used works well if you only have one video file, but if you’ve created multiple encoded video types, for H.264, Ogg and WebM, this approach won’t work as it only allows one source file to be specified. Instead we can use the <source> tag, nested inside the <video> tag, to specify different source files.

001 <video width=”320” height=”240”>
002
003  <source src=”video.mp4”  type=”video/mp4;     codecs=avc1.42E01E,mp4a.40.2”>
004  <source src=”video.webm” type=”video/    webm;     codecs=vp8,vorbis”>
005  <source src=”video.ogv”  type=”video/ogg;     codecs=theora,vorbis”>
006 </video>

Understand the type
You’ll notice that in the previous example code, we specified the video type for each <source> tag. This string is really important as it lets the browser know exactly what kind of encoding the file being referenced has. The browser uses this to determine whether it can actually play the file or not. From there it will automatically choose an option it can recognise and thus, will play.

Deal with older browsers
Older browsers won’t understand the <video> and <source> tags and will simply ignore them. They will happily render content inside the <video> tag, whereas HTML5-capable browsers will ignore nested content. This offers a handy solution to providing a fallback. We can nest an <object> tag inside the <video> tag, linking to a Flash video player.

Embed the fallback
Embedding a fallback <object> is as simple as taking the code you would ordinarily use to place a Flash movie in your page and placing it inside your <video> tag, alongside the <source> tags. Add the lines of code shown below to place your fallback in position. Note that we’re making specific reference to the H.264 file as the video source.

001 <video id=”movie” width=”320” height=”240”>
002  <source src=”video.mp4”  type=”video/mp4;     codecs=avc1.42E01E,mp4a.40.2”>
003
004  <source src=”video.webm” type=”video/    webm;     codecs=vp8,vorbis” />
005  <source src=”video.ogv” type=”video/ogg;     codecs=theora,vorbis” />
006   <object width=”320” height=”240”     007    type=”application/x-shockwave-flash”
008    data=”flowplayer-3.2.1.swf”>
009    <param name=”movie” value=”flowplayer-    3.2.1.swf” />
010    <param name=”allowfullscreen”         value=”true”     />
011    <param name=”flashvars”             value=”config={‘clip’: {‘url’: ‘http://    yourdomain.com/video.mp4’, ‘autoPlay’:false,     ‘autoBuffering’:true}}” />
012   </object>
013 </video>

Video properties
You can control your video’s behaviour and appearance using different attributes on the <video> tag itself. If you’d like the browser to render its standard video controls, such as a transport bar, play/pause and volume buttons, add the attribute ‘controls’ to your tag. The autoplay attribute dictates your video’s initial state – playing or paused.

001 <video id=”movie” width=”320” height=”240”     controls autoplay>...</video>

Access the API
The HTML5 video API allows you to control your video (or audio), setting properties and calling methods to play, pause, control the speed of playback and more. You can access the API by selecting the video element using the DOM, then calling methods directly upon it. Start by using document.getElementById() to locate your video.

001 <script> 
002   var video = document.
003 getElementById(“movie”);
004 </script>



Different methods
There are a variety of different methods you can use within your script. Some good options to experiment with in the first instance include play() and pause(). Add the code shown below to make your video play and pause when you click on it (not just on the play button itself).

001 <script> 
002   var video = document.            
003 getElementById(“movie”);
004   video.onclick = function(){
005       if (video.paused) { 
006          // the .paused property lets us know whether the video is currently paused or not
007          video.play();
008       } else {
009          video.pause();
010       }
011    }
012 </script>

Make it easier
One of the drawbacks to using the native HTML5 video and audio API is that when a browser is using the fallback, the API won’t function correctly. The easiest way to solve this is to use a library that provides an integrated API to add compatibility with a fallback option. The following pages detail some great options to try.

×