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)

In the beginning…


Back in the early years of the Internet, multimedia was limited to tinkering with MIDI files and animated GIFs—while these were considered very advanced at the time, some of us probably wonder why we ever used them, given the advanced state of web technologies available today!

If you wanted to include any multimedia file(s), you would be forced to include a cryptic block of code similar to the following code snippet:

<object width="425" height="344">
  <param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"></param>
  <param name="allowFullScreen"
    value="true"></param>
  <param name="allowscriptaccess"
    value="always"></param>
  <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"
    type="application/x-shockwave-flash" allowscriptaccess="always"
    allowfullscreen="true" width="425"
    height="344"></embed>
</object>

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Most of the preceding code snippet has now become redundant, at least for modern browsers, due to advances in HTML technology since 2005. As you will see later in this book, this code has been reduced down to three to four lines (although you can add more options later if you wish).

The downside of this is that while the HTML5 standard code has shrunk, browser support has unfortunately not kept up—developers using the HTML5 <video> and <audio> tags must make allowances for different formats, as you will see throughout this chapter.