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)

Adding mime types (must know)


Now that we have set up the basic video code, it is time to try playing the video—in some circumstances, you may find that browsers will not play videos correctly if it can't determine the mime type to use. In this task, we implement an easy change to rectify this and allow videos to play correctly.

Note

Multi-Purpose Mail Extension (MIME) types are made up of two parts—a type and a subtype—and are means to help define file types so that a client PC can correctly interpret how to treat a file received from a server via the Internet. For example, the HTML5 video formats used in this book have the type of video, but the subtypes could be .ogg, .mp4, or .webm.

Getting ready

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

How to do it...

  1. Crank up your favourite text editor and create a new text document. Save it as .htaccess into the root folder of your website.

    Tip

    You may want to use quotes around the filename when saving it; this forces your text editor to save it as that filename.

  2. Add the following text and save the file:

    AddType video/ogg .ogv
    AddType video/mp4 .mp4
    AddType video/webm .webm
  3. Try playing the video now—hopefully, you may find nothing has changed, and that the video still continues to play. The change you've made now ensures that anyone playing the video will be able to play it properly depending on which browser they use.

How it works...

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.

There's more...

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.