Are you looking to host the next mini blockbuster video from your website? Do you want it to be accessible in most modern browsers, without the need for lots of extra plugins, or extra code?
If the answer to the above two questions is yes, then enter HTML5 Video—created as the new way to show video online in most modern browsers without the need for extra plugins.
HTML5 Video is used by a number of high-profile companies—one of the most notable will be YouTube, started in 2005 by some ex-PayPal employees. Today, it has 800 million unique visitors each month, who watch in excess of three billion hours of video each month—some of which will be in HTML5 format.
This book will take you through the beginnings of HTML5 Video, and also how to get rid of the confusion that surrounds its usage. We will take a look at how to style elements of the video tag, as well as use jQuery to build a basic plugin that can be used in your website or content management system. Finally, we will have a look at how you can package up your plugin for use on the Internet in applications such as WordPress.
If you're new to the world of HTML5 Video, and want to explore the functionality available, then this book is for you. With easy to follow step-by-step instructions, you'll find what you need to get you going with using this library, and discover how you can implement some complex functionality with just a few lines of code.
So what are we waiting for? Let's get started….
Throughout this book, we're going to look at a variety of exercises that are designed to help you get accustomed to working with the basics of the new HTML5 <video> tags. You're probably wondering what we're going to cover, right? No problem! Let me reveal all:
Transcoding a video into HTML5 format: You've been given a video, but it's not in the right format? No problem! Here's where I show you how to convert it into any of the formats needed for HTML5 Video playback.
Installing playback support: Playback support? You're probably thinking that you would play these videos in Windows Media Player, right? Ah, no such luck! Windows Media Player doesn't support these formats! Don't worry! I'll show you how to fix this and get them playing.
Publishing videos on Youtube or on VideoBin.org: In these two recipes, I'll show you how you can host your videos using YouTube or Videobin.org—there are a multitude of options available, so you can choose whichever suits you the most; these are just two of them.
Embedding videos, the old school way: The old school way? Surely embedding videos is one simple way, right? Yes…and no! Embedding them the old school way isn't simple.
Embedding videos using HTML5: I'll show you how, with the new tags, it becomes a cinch to embed videos with as little as two to three lines of code.
Extending the video code: Now that we've embedded the video, we'll look at how we can extend the functionality, to include background images, the ability to preload, and why autoplay isn't all it's cracked up to be!
Adding mime types: Mime types? Surely the operating system handles these, right? Well, yes, it can…usually. Occasionally, it doesn't get it right. This shows you how to ensure it knows what to do.
Adding cross-browser support: One headache most designers must face is providing cross-browser support for any websites they design—the HTML5 <video> tag is no different! While the video tag is still in a state of flux in terms of supported formats, you will find that you need to allow for different formats—here's where I show you how to include those formats.
Adding codec definitions: Setting up mime types isn't always enough; you may also find that you have to specify particular codecs that should be used to ensure optimal playback of your chosen video. There are three codecs you need to be aware of; here we show you what they are, and how to add them into your code.
Providing fall-back support: One drawback of the new <video> tag is that videos won't play on older browsers, such as IE 6 or 7. In this task, I'll show you how you can provide support for these browsers as part of using the new tags.
Adapting for iPads/iPhones/Android: In this age of mobile browsers, smartphones, and PCs, visitors will expect your videos to work on a number of different platforms. While videos will normally play, there are some quirks you need to be aware of to ensure maximum compatibility is maintained.
Setting up VideoJS player, and Kaltura Video: In these two recipes, we take a break from delving into the intricacies of setting up video and focus on how to install a pre-built video library using two well-known examples in the form of VideoJS and Kaltura Video.
Building the video player—the framework: It's time now to focus on the real code required to build a video player—in this task, and over the next four, we look at the code required to build your own player.
Adding controls to your video player: The first part of building the video player provides the basics, but we need some form of ability to control the video, such as sound levels—in this recipe, we add the necessary HTML controls code, as a precursor to providing the jQuery functionality.
Styling your video player: The video player by now will work, but it won't win any awards for style—in this recipe, I'll show you how to style it, as a starting point to creating your own design.
Adding jQuery functionality: It's time now to provide the "glue" that makes it all work—here's where we add in the necessary jQuery code to control your video, and make the buttons work.
Providing a custom theme: By this point, we'll have a working player, although the style will be a little functional—in this exercise, we'll add in something that will make the video player more aesthetically pleasing to use.
Adding an overlay button: Most video players you see, such as YouTube, usually have a button in the middle that appears, when video playback hasn't started yet, or if it has been paused—in this recipe, I'll show you how you can add such a button.
Inserting subtitles: Subtitles…for a video? Well yes! For accessibility purposes, this is critical. You'll see examples of this on YouTube, when people have added comments to videos that they have uploaded. In this recipe, I'll show you how you can do this using a pre-built subtitle library.
Providing fall-back support using a jQuery polyfill: Polyfill? This sounds like something you would use to repair cracks, right? Not in this instance! A polyfill helps provide backward compatibility. I'll be using MediaElementJS to show you how you can cater for old browsers that should really be put out to pasture.
Displaying video through an Overlay: By this time we will have covered a lot of functionality, so let's relax a little, and look at how you can add a little extra sparkle to your video play back, by adding a lightbox effect.
Bonus chapter on HTML5 Audio How-To is available for download at http://www.packtpub.com/sites/default/files/downloads/HTML5 Audio How-To.pdf
There will be various pieces of software you will need to install in each chapter—we will go through the specifics of each piece of software ahead of any task. In the meantime, you will need the following:
An Internet connection for downloading various pieces of software for each chapter
A modern browser—it must be one capable of running CSS3; ideal examples would be the latest versions of Firefox, Safari, Chrome, or IE. We will look at backward compatibility in older browsers, but the effect will not be the same!
A text editorthere are hundreds available for free or low cost; alternatively, you can use something Notepad. My personal preference is Textpad, which is available from http://www.textpad.com.
This book is great for those new to HTML5 Video—you may already have some prior experience of jQuery or using video (or both); this book will take you through the development of HTML5 Video, attempt to explain some of the confusion that surrounds using it, and present some examples of how to include it in your own web pages.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "We can include other contexts through the use of the include directive."
A block of code is set as follows:
<video src=turkish.ogv width=320 height=240 poster=turkish.jpg> Download the <a href=video.ogg>Turkish dancing masterclass video</a> </video>
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<video width=320 height=240 controls poster=turkish.jpg>
<source src=turkish.ogv type=video/ogg>
<source src=turkish.mp4 type=video/mp4>
Download the <a href=video.ogg>Turkish dancing masterclass video</a>
</video>New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text "clicking the Next button moves you to the next screen".
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
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.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.