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