HTML5 Video How-To

Before we can convert the videos, you need to download a copy of Easy HTML5 Video Convertor for your platform—it is available for Windows as well as Apple Macs. Make sure you also have a copy of your raw video at hand, ready for conversion. For the purposes of this task, I will assume it is in the .mov format.

Here we looked at how to simultaneously convert your video into formats suitable for playing using the new HTML5 <video> tags. EasyHTML5Video saves you a lot of hard work in the conversion process—it makes it a snap to convert the file into the right format, and automatically creates the basic code to allow basic playback in a browser.

In this example, we kept most of the settings at the defaults, which is perfectly acceptable for converting video files. You could also alter the size of the converted video if desired, or set it to automatically play when first shown (though this is not recommended as we will see in the next chapter).

There are many individuals or companies who have produced different codecs with differing results. We will take a look at one package that seems to work very well for Windows, which is the K-Lite Codec Pack . You will need to download a copy of the pack, which is available from http://fileforum.betanews.com/detail/KLite-Codec-Pack-Basic/1094057842/1—use the blue Download Now link on the right-hand side of the page. This will download the basic version, which is more than sufficient for our needs at this stage.

Let's go ahead and install the software! This task assumes you will be using Windows Media Player on a Windows PC platform.

In order to play back HTML5 format videos in Windows Media Player, you need to ensure you have the correct support in place; Windows Media Player doesn't understand the encoding format of HTML5 videos by default. In order to overcome this, we need to install additional support for the playback of these videos using codecs designed for the various formats available—the K-Lite package aims to remove some of the pain of this process.

The package we've looked at in this task is only available for Windows; if you are a Mac user, you will need to use an alternative method. There are many options available: you can try using Perian, which will add MP4 and WebM formats to QuickTime and is available at http://www.perian.org. The OGG format is not supported natively on Apple Macs, so if you want to add support, you can do so using a third-party application such as the Quick Time Components from Xiph.org at http://www.xiph.org.

For the purposes of this task, we're going to use one of the videos we converted from Task 1, so make sure you have this available.

In order to get the best results in the task to follow, you need to ensure that you use an HTML5 compatible browser. Also, you need to have a registered free account at YouTube and should have enrolled yourself in YouTube's HTML5 video trial at http://www.youtube.com/html5.

For the second part of this task, the only prerequisite to ensure optimal playback is that the video should be encoded to Ogg Theora format. This is to save bandwidth, although other formats can be used—VideoBin will automatically convert (or transcode) the videos on the fly. For the purposes of this task, I will assume you have used the video you converted in the previous task.

An alternative to using YouTube is to use another service, where licensing is not so restrictive; one such service is VideoBin, hosted at http://www.videobin.org. In this part of the task, we will look at how to upload and access content from this service.

YouTube has designed its upload process to be flexible and very easy to use. You can upload any of the HTML5 format videos (such as the ones we created from Task 1) as well as AVI, MPEG-PS, WMV, and FLV formats. When the file is uploaded, it is automatically transcoded into WebM format—this is effectively a free version of the VP8 format developed by On2 Technologies, which was subsequently bought out by Google in 2010.

At this stage, you will have a perfectly working video hosted on YouTube that is available for you to embed into your site in the normal manner.

However, if you go to Video Manager from within YouTube, you can edit the settings assigned to this video such as Privacy, Video thumbnail, allowing Comments and ratings, depending on your own preferences, as shown in the following screenshot. You can even set Google Maps to show where you recorded your video!

In the second part of this task, we looked at using VideoBin.org—a free hosting service with a less restrictive licensing arrangement than YouTube. Written using Python and Django, converting videos through VideoBin.org has been designed to be kept simple, so that you can concentrate on hosting your main content without the worry of the additional demand or overheads of running a video on your own server. You will then be able to style your video player as you wish, using styles that fit in with your site; we will see how to do this later in this book.

The key thing to bear in mind is the format used—while the upload process is deliberately kept simple, you will notice a delay if the chosen video is not already using the Ogg Vorbis format. All uploaded videos are transcoded from their original format to Ogg Vorbis using ffmpeg2theora as part of the process.

In the next section, we will take a look at how to style your own video player, so that you can use your own styles that will fit in with your site's appearance.

Up until now, we've concentrated on preparing our video for use with the HTML5 video tags. Let us now turn our attention to how you can embed videos into your pages looking at the following sections:

For this task, you will need to avail yourself of two videos—one in SWF format and the other in WMV format. If you don't have any available at hand, there might be examples available on the Internet. One such example is the trailer for "Big Buck Bunny", available from the Peach Open Movie Project at http://www.bigbuckbunny.org/index.php/trailer-page/. You might have to convert it to the proper formats required for this demo—a good program to use for this is XMedia Recode, which is available at http://www.xmedia-recode.de (German language).

This is an example of what you will see when using the Windows Media player code—I'm using a copy of the "One Big Rabbit" video, available from the Peach Open Movie Project, as shown in the following screenshot:

The code embeds an instance of each of the Windows Media Player and Adobe QuickTime plugins within the webpage; it uses the codebase attribute to reference the relevant plugin. If a hash value is included in the URL provided for this attribute, then the browser will compare this version with the one currently installed and either use it or download a more recent version.

The preceding code snippet highlights a couple of major drawbacks: the embed code doesn't work in all browsers despite using the <embed> and <object> tags within the code block; it also requires the use of external plugins in order to operate correctly.

In the next task, we will be looking at how the preceding code snippet can be simplified using HTML5's <video> tag.

For this task, you will need a copy of one of the videos we converted in Task 1 of the previous section. For the purposes of this task, I'm going to use the WebM format version. You will also need a copy of the videotemplate.html file saved from the previous task.

Crack open your usual text editor, load up a copy of the videotemplate.html file, and then make the changes shown in the following code snippet:

<!doctype html>
<html>
<head>
<title>HTML5 Video Test</title></head>
<body>
<video>
<source src="trailer_480p.webm" />
</video></body>
</html>

That's all you need to embed video—this will work perfectly in Firefox as shown in the following screenshot:

But as we will see later in this section, it won't work in all browsers!

The <video> attribute was designed as an attempt to standardize the HTML code required to embed videos within browsers; the source tags act as a form of browser sniffing, selecting the appropriate video format to play in the browser being used. In this instance, it will only display in Google Chrome, Opera, and Firefox. Other browsers will show nothing—although IE9 and Safari will play WebM format videos if third-party support has been added.

If desired, you can reduce the code even further to its bare minimum—the following code will have the same effect as that in the main task:

<!doctype html>
<html>
<head>
<title>HTML5 Video Test</title>
</head>
<body>
<video src="trailer_480p.webm" />
</body>
</html>

For this task, you will need a copy of the code from the previous demo—we are going to alter it to provide a more functional player.

The code will work in a similar fashion to that of the previous task, but this time we've added a request to show the standard browser controls for the <video> tag as well as asking it to load an image as a "placeholder" before the video is played.

There are some more tags that can be used when embedding HTML5 video as shown in the following table:

It is worth noting that these are available for use, although it is unlikely that you will want to use them by default; a good example is the autoplay option, which can place an unnecessary drain on bandwidth if not used carefully! (This is particularly true on iPhones, which will ignore autoplay by default.)

You will also notice that although we've only added one command to display the controls, the colors and design used will differ between browsers:

From top to bottom of the preceding screenshot, we have Internet Explorer, Safari, Google Chrome, and Firefox.

For this task, we don't need anything except your text editor.

In most instances, browsers will usually play the right video. However, the HTTP protocol doesn't know the concept of file extensions—this means you cannot rely on a browser being able to play the right video all of the time. To get around this, we add in this small configuration change, so that the browser is able to correctly determine the file format from the extension and play the video.

As you will see later in this section, when we adapt the video code for use with other platforms, some platforms don't like the use of the type command within the video code. Using an .htaccess file may not appeal to some, but is a useful way to get around this issue.

For this task, you need to avail yourself of a copy of the code from the Extending the video code task as we are going to make some changes to this code. Other than this, make sure you have copies of your video in MP4 and OGG formats (while the latter format is not used as much, we will still include it in our code).

The reason for specifying a number of different sources is to allow the browser to pick the right video to play; not all formats are compatible with all browsers. You will see that we've also specified the MIME types for each video format; this is to help the browser to decide whether it can play that video and also which format the video should be played in. If a MIME type is not specified, then the browser has to start downloading it in order to find out whether it can play the video; this can be wasteful of bandwidth.

All we need for this is a copy of the code from the previous task—the codecs should already be present on your PC if you installed them in the first section of this book.

Working with codecs, particularly within the HTML5 arena, can open up a real minefield of confusion. The key to understanding it is that enabling codec support increases the likelihood that a browser will be able to correctly determine whether it is able to play that particular video correctly.

In the previous code, I've specified some typical codecs that can be used—while the codecs for WebM and Ogg are straightforward, the one for MP4 (or MPEG-4) is less so; the codec used here represents the Baseline profile for H.264 and the Low-complexity profile for AAC.

It is perfectly possible to use a number of different codecs with particular video types—one good example is the MP4 format. Care should be exercised when choosing an appropriate codec. If one is chosen that is not a popular codec, then it is possible that the video may not play. The reason for this is that if the browser recognizes the file type (either inline in the code or via the .htaccess file), but doesn't "see" the appropriate codec installed, it will then refuse to play the video.

In order to get the best out of this task, you will need to avail yourself of some means to be able to view your video pages within an older browser. There are several ways to achieve this, depending on which browser you choose:

The aim of the code is to provide fallback support for displaying a Flash-equivalent movie; this is achieved by using a SWF-based container from which we run the MP4 file that would otherwise be run from within the <video> source tags. We also include a plain image and set a title attribute for it—this will be the "last-call" route that the browser will take if it is unable to play any of the videos listed within the code.

While the previous code will work as a fall-back for the HTML5 video, there are some points to note:

For this task, you will need to ensure that you have videos that are of a suitable size for playback on mobile devices; you can try using a free conversion service such as Online-Convert.com at http://www.online-convert.com to convert the videos down to a preset size depending on which platform(s) you want to support.

The changes made in this task are designed to get around some browser or OS quirks that still exist as well as the (still) limited support for video formats on the mobile platform. This task highlights one of the reasons HTML5 video can still be confusing for some—this is still largely due to HTML5 being an emerging technology for which support is still evolving.

The key to this task is that while the changes required are simple to make, you should expect to have to make changes in the future, until HTML5 for the mobile platform has matured. For example, as you will have seen from this task, support only exists for the MP4 format for most mobile platforms—this is likely to remain until mobile devices appear with hardware decoders for the WebM format built in. When this happens, it would mean that there would be no need to have to include the MP4 format as the first source; it is likely that the order would then not matter, although that is up to the mobile device manufacturers!

For this, we don't actually need to download any files—VideoJS is one of those rare players that is available on a Content Delivery Network (CDN); it is enough to link to the files for the purpose of this task.

If all is well, you will have a video playing similar to the following screenshot:

The player uses very similar code to that we've used throughout this section—the styling however has been customized using additional CSS and JavaScript (similar to what we will see in the next section). This means that a consistent style can be used throughout most (if not all) platforms, which is infinitely preferable to the mix of styles you will otherwise see if you are not using the same styles on all platforms! The added benefit here is that because the JS and CSS files are hosted on a CDN, you don't need to worry about updating the code as this is done for you automatically. The code can also be downloaded separately if you prefer to host it locally.

Kaltura's Video Player is available from a CDN link—we'll be using this as part of the task, so we don't need anything extra for this task.

If all is well, you will see something similar to the following screenshot:

The video player works by reusing the standard format code for <video>, but deploying CSS and some JavaScript to redesign the controls using progressive enhancement principles. Using jQuery UI, this gives the player a consistent theme across all browsers; the theme used can be altered at will using the Theme Roller applet as shown in the following screenshot:

Unlike some players that rely on JavaScript to specify the video to play, Kaltura's video will still play if JavaScript is disabled as it will use the standard browser controls—this is known as progressive enhancement .

So far, we've looked at how you can embed video using the <video> tags, as well as adapting your web pages to cater for video playback through a number of different browsers. In this section, we will focus on how you can write your own video player by looking at the following:

All you need for this task is your favorite text editor, and copies of the videos we converted earlier in this book—the rest will be added during the task.

If all is well, the browser will play the video when viewed in a browser using the inbuilt context menu controls.

We've taken a copy of the original HTML required to display videos using the HTML5 <video> tag and set it up with the names of the videos we will use, depending on which browser the page is viewed in. We've also created a blank template for the jQuery plugin that we will start to develop over this section. We've altered the code to allow for some changes that will be required for later tasks such as adding in the custom controls. You may also notice that there are no controls showing by default—this is because we've added in our own custom controls placeholder, but as there is nothing included within them, nothing will show!

For this task, as we are only adding code, all we need is our text editor.

If we are using the <video> tags in HTML, then the browser will provide its own set of controls. However, as seen in the previous section, these controls will differ depending on which browser is used—they will not all be the same. The purpose of this section is to begin to create our own controls, so that we can provide a consistent appearance, no matter which browser you use to view the videos. There will be scope for you to add additional ones once you get more familiar with building players. A good example is the ability to show an icon that changes depending on what position the volume control has been set.

Before we can add any code, you need to avail yourself of some icons—there are some included with the code download for this book, or you can try looking on the Internet. You can try something like the icons created by Kevin Andersson, available from http://www.tabsicons.com/classic/#tabs_free. You will also notice from the CSS style code in this task that I've used sprites, along with CSS to position them—this results in a smoother result as the image is already cached. To create your sprite, you can use the free online service at http://www.csssprite.com; you will need to rename your resulting file accordingly—the site gives you the CSS required once the images have been converted.

We also need to add in images for the volume background as well as the playback seeker handle—again, you will need to look for suitable images on the Internet or you can use the ones included in the code download for this book.

In the previous tasks, we've focused on providing a basic style to the video controls as well as adding the requisite functionality for controlling the video through jQuery. A big drawback with the styles that we've looked at is that they are not terribly attractive; this is something we can easily fix by adding in the final styling code, which we will do now.

Phew! That was a mammoth task! We've looked at a number of different styles in this task, with the key aim of designing something that displays a basic set of controls, and which can be customized at a later date. You will note also from the first screenshot in this recipe that there appears to be two sets of controls—the top one is the set of controls being styled by the code from this section; the bottom one (partially hidden), is the default set of controls shown by the browser.

The first part of this code overrides the original .video_player .custom_controls CSS style; this is designed on the principle of progressive enhancement, where removing the new theme file will still allow the base style to be used. We've added some additional styles to give some color to the background container as well as the volume slider and volume handle.

We've also delved into the CSS required to set up styles for each element, such as volume control, a playback button, a pause button (not shown yet), and others—while you will find that these are yet to done, we've laid down the groundwork for the next task, which is to add in the jQuery functionality!

Now that we have split the CSS styles into two separate files (one for the base appearance and one for the theme), we can play with the colors used on the seeker controls. You can replace the .time_slider .ui-slider-range style with any number of different colors—the choice is entirely up to you. A good source of color choices is in the themes offered as part of jQuery UI—try this blue-green color code as an example:

.time_slider .ui-slider-range {
  background: -moz-linear-gradient(center top , #2C4359, 
  #E1E463) repeat scroll 0 0 #2C4359;
  background: -webkit-linear-gradient(center top , #2C4359, 
  #E1E463) repeat scroll 0 0 #2C4359;
  background: linear-gradient(center top , #2C4359, #E1E463) 
  repeat scroll 0 0 #2C4359;
  background: -o-linear-gradient(center top , #2C4359, 
  #E1E463) repeat scroll 0 0 #2C4359;
  border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;    
  -moz-border-radius: 5px 5px 5px 5px;        
}

We need to retrieve a copy of the videoplayer.js file that we created earlier, so go ahead and load this into your normal text editor. Other than this, there isn't anything else required—we will add the necessary code as part of the task. I will assume that you're still using the files from previous demos—if this is not the case then please alter this accordingly.

Throughout this task, we've worked stage by stage on providing the jQuery-based functionality required to operate the controls on the video; this is the functionality that would otherwise be provided by the browser's default video controls, which we will be hiding in the next task.

You will notice that I've used the Google CDN links for jQuery and jQuery UI—while this is perfectly acceptable (and in some cases preferable), you may prefer to use a custom download at least for jQuery UI, which can reduce the size of the file to a more manageable 20KB. If you want to use this alternative, you will need to build a custom download, at http://www.jqueryui.com/download, to include the Core, Widget, Mouse, and Slider elements. The code will need to be altered as well—change the Google CDN link for this (assuming you are following the structure outlined at the start of the task):

<script type="text/javascript" src="js/jquery.ui.min.js">
</script>

For the purposes of this task, you will need to grab a suitable play icon that can be used on the overlay—the size is not critical, as long as it is of a proportional size to your video display. You will also need a copy of the videoplayer.css file that we've been working on throughout this section.

The code in this task has been made very simple, as we took care in an earlier exercise, to provide a common function in our code that handled the initiating of playback or pausing of the video.

There are three key elements to this task: the CSS styling, the placeholder for the overlay, and the jQuery functions to handle the playing or pausing of videos by clicking on the Overlay. We altered some of the existing event handlers to allow for the addition of the overlay—this is principally to fade it in or out, depending on the current state of the video. All of the code was made possible though by the use of the variable created to store an instance of the class that refers to the Overlay in the code.

For this task, you need to avail yourself of a copy of Cuepoint JS, and copies of your videos from earlier tasks—ideally these should be in MP4, WebM, and Ogg formats. You will also need a copy of the subtitle background image used by the code—this is available in the code download that accompanies this book. Finally, you will also need a number of thumbnail images that can be used as jump links to specific sections of the video. In our task, we will use a video that is 768px wide; for the jump link images to fit in underneath nicely, we will use four images of 182px wide. You may need to alter your image sizes if you are using something different.

Here, Cuepoint collects together a number of statements into an array; these are displayed on screen according to the second count that must be provided as part of the array. The second part creates a number of calls to cuepoint.setTime() as individual functions, so that if you click on each in turn, it will advance the video to that time. Cuepoint is one of a number of libraries that aim to provide similar functionality albeit using its own method, and not WebVTT files.

Whilst CuepointJS serves a purpose, it was only designed to be a simple implementation—if you want to learn more, it is worth getting to grips with the WebVTT format and files. Support for the format is still in a state of flux, and has yet to be included in all browsers; once this happens, it looks to become the standard format that can provide some consistency across a number of platforms.

For this task, you will need to download a copy of mediaElement.js, which is available from http://www.mediaelementjs.com. You will also need copies of your videos; you can reuse the ones created earlier, as long as you have copies in WebM, MP4, and Ogg format. The download contains a number of files, of which you only need a few—you need to extract copies of the following files into a separate folder that we will call mediaelement demo:

The observant amongst you will have noticed something—you would be correct in thinking that the preceding code snippet is very similar to the one we used in one of our earlier recipes. If this is the case, then what's the reason for including it here?

The answer to this forms the key reason for this task: MediaElement.js acts as a polyfill, to provide a form of compatibility with older browsers, while still using the <video> tags. It works by not trying to retrofit backward compatibility to a HTML5 video player, but instead providing forward compatibility and consistency; it starts with a baseline of using the MP4 format in the standard <object> tags, but switching this to the <video> tag if it can detect that the browser being used is able to use this tag.

One of the drawbacks of the <video> tags at present is the need to provide fall-back support for older browsers, at least for the next few years. The problem with this is that while development of the tags is still in something of a state of flux, there is no standard fall-back method to use. It's for this reason that people have provided their own polyfills. Some notable examples you can try include Modernizr (http://www.modernizr.com) or html5shiv (http://code.google.com/p/html5shiv/).

For this task, you need to avail yourself of a copy of the shareware application VideoLightbox—at the time of writing, the latest version is 2.1, which is available from http://www.videolightbox.com. It is free for non-commercial use, so if you need to use it commercially, you will need to purchase a license that is $49 at the time of writing. You will also need a copy of a video in MP4 format—one of the ones you've converted, or used, from earlier will do fine.

VideoLightbox uses a combination of jQuery Tools (http://www.jquerytools.org) and the SWFObject library (http://code.google.com/p/swfobject/)—the SWFObject acts as a container, into which a base player file is stored, and from within which the MP4 video is played. The jQuery Tools library is used to provide the overlay functionality. A call is made to the player "container" (in this instance player.swf), which stores an instance of our video, and is used to provide the stop/start controls for video playback.

We've taken a look at a number of recipes, to show you how you can embed HTML5 video—using the new <video> tag—within your pages. This is only just the start of what you can achieve using the new tag—there is a whole world out there to explore. I hope you've enjoyed working through the recipes, just as much as I have enjoyed writing this book!