Book Image

HTML5 Video How-To

By : Alex Libby
Book Image

HTML5 Video How-To

By: Alex Libby

Overview of this book

<p>Publishing videos online has been around for a number of years, although has really taken off with the advent of video sharing sites such as YouTube. The power of video is huge if done well; it can present a lot of information in a more visually engaging manner than using written text and pictures. Done badly though – it can present real problems to the company or individual hosting the video, that have the potential to cause some real harm!<br /><br />"HTML5 Video How-To" is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the real power that is behind HTML5 video, and give you a good grounding in using it in your web pages.<br /><br />This book looks at the HTML5 video formats available, and breaks down the mystery and confusion that surrounds which format to use. It will take you through a number of clear, practical recipes that will help you to take advantage of the new HTML5 video standard, quickly and painlessly. <br /><br />You will also learn how to build your own video player using jQuery, or by using one of the pre-built libraries available. We will also take a look at adding functionality such as lightbox effects, or subtitles, as well as how to publish videos to popular hosting sites, such as YouTube or VideoBin. If you want to take advantage of using the new HTML5 video format, then this is the book for you.<br /><br />You will learn everything you need to know to convert videos into the right format, as well as how to display them in your browser or web pages, across multiple platforms.</p>
Table of Contents (8 chapters)

Installing playback support (must know)


Now that we have converted our videos, ready for playback, it's time to ensure that we can actually play them back on our PCs as well as in our browsers. Most of the latest browsers will play at least one of the formats we've created in the previous task, but it is likely that you won't be able to play them outside of the browser. Let's take a look at how we can fix this by updating the codecs installed in your PC.

Note

For those of you not familiar with codecs, they are designed to help encode assets when the video is created and decode them as part of the playback. Software and hardware makers will decide the makeup of each codec based on which containers and technologies they should support; a number of factors such as file size, quality, and bandwidth all play a part in their decisions.

Let's take a look at how we can update our PCs to allow for proper playback of HTML5 video.

Getting ready

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.

How to do it...

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

  1. Go ahead and double-click on the K-Lite_Codec_Pack_860_Basic.exe setup file. Click on Next, and then accept all defaults until you reach the File associations for Windows Media Player screen (as shown in the following screenshot); when prompted for the Installation mode on screen 2, choose Advanced.

  2. When you reach the File Associations for Windows Media Player screen, select the Select all video option to enable support for all video formats as shown in the following screenshot:

  3. On the next screen, select Select all as shown in the following screenshot:

  4. On the Speaker configuration screen (as shown in the following screenshot), select the 2.0 (stereo) option—while you can adjust this later, it is sufficient for the purposes of this task.

  5. Click on Install and then Finish. The codecs have now been installed!

How it works...

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.

There's more...

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.