Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
In our previous movie, we discussed the current battle going on over the video file format supported for HTML5 video. In this movie, we'll discuss options for encoding your video, check out where you can download some free software that can assist you, and then encode some videos for our Trail Guide page. We'll need both Ogg Theora and H.264 videos, so we'll create both. As of this recording, there aren't really that many easy solutions for encoding WebM video, but keep your eyes open. I'm recording this immediately after Google released VPA as an open source codec.
So, it won't take long for encoding support to increase for WebM video. A good place to look for encoding resources for WebM as they are added would be the WebM Project, which is the web site I'm on right now. So, eventually when you go to their Create page, you'll probably have lots of third-party solutions available for you, but currently there really isn't that much out there. Okay, so the first thing we want to do is encode our Ogg Theora video. To do that, I'm going to use a free plug-in for Firefox designed to help encode Ogg Theora video.
You can find it at FireFogg.org. Now, the only requirement is that you have Firefox versions 3.5 or higher installed. There are other options for encoding Ogg Theora, but this is a free cross-platform. So, it doesn't matter if you're on a Mac or a PC; you can just download this and you'll have an encoder. So, I'm just going to go ahead and click right here to install Firefogg. It's going to say, "Hey! Do you want to install that?" I'm going to allow that. There we go and install that. Now, once you install the plug-in, you're going to have to restart the Firefox in order for this to work, and that's fine.
So, now when I restart Firefox, it lets me know that Firefogg has been added. Once I go to the Firefogg page now, so FireFogg.org, now it tells me it's installed and I can click on the link here that says Make Web Video. Perfect! Now, if you're a video professional, chances are you already have tools available to you to encode video in both the Ogg Theora and any other format that you might need. However, in case you're a little short on those video editing tools, an option like this, Firefogg, or like the HandBrake solution I'm going to show you in just a little bit, are really good solutions because they're cross-platform, they are open source, and they are free.
So, while you might look at what we're about to do and say, "Well, that doesn't have all the options and bells and whistles of XYZ," that's true, but it's free and it's a very quick and easy way to encode some video. Okay, so now I'm just going to select a file and I'm going to go into my Exercise_Files/Chapter_06/06_ 07 and find the _video folder. Inside that, we have a QuickTime movie, the explore_promo.mov file. So, this is a short little promo video for our Cycle California Tours and we want to add this to our page using HTML5 video.
So, I'm going to open that up, and then I have a host of options that come available to me. I could just go ahead and do the presets, or I can come down here and customize these. So, notice I can choose when the encoding starts and stops. So, if I need to trim off some of the video, I could do that there. I have Basic quality and resolution control, so maybe I'm going to crank the quality of the video really up. It's a short video. It probably won't make the file size that much bigger. Maybe I'll do the audio quality in a similar fashion. Now, you want to leave these two alone. You want the video codec to be theora and you want the Audio codec to be vorbis, because those are the two supported codecs within the browsers.
I'm also going to leave the video with exactly the way it is, 420 x 236. Notice that you could scale down, but you can't scale up past the original size of the video. The video happens to be the size I need it, so I really don't need to mess with that. Now, there are also some other controls we can do too. There is Metadata if you want to add some of those. You can do some of more advanced video encoding controls if you want to target a specific video bit rate. Change the frame rate, aspect ratio, you could do all of that. Same thing for audio encoding tools. If you want, you could just turn the audio off, and we don't want to do that.
So, I've got all those settings exactly the way that I want them. So, now all I have to do is say Encode to File. Now, as soon as I do that, it's going to say, okay, where do you want to put this? Well, I want to make sure I'm putting it in exactly the same folder. So, I'm going to go to Exercise_Files /Chapter_06/06_07/_video, and that's where I want to place it. Notice it's going to have a file extension of OGV, which is the Ogg Theora file type. Hit Save and now it's going to encode the video. You get to see a nice little preview as it's encoding it as well, which is nice. You can see it didn't take that long. It's a really short video, but it's pretty fast and obviously that's going to depend a lot upon your browser connection.
Now, the next solution that I want to show you and the one that we're going to use for the H.264 encoding is HandBrake. HandBrake is a really cool tool, and if you've never used it before, it allows you to take almost any video file format and encode it into another video file format. One of those available to you is the MP4 format that uses the H.264 encoder supported by HTML5 video. So, it's a really quick and easy way to get that, plus it works on both the PC and the Mac. So, you want to go to the Download page, choose your particular download, and then go ahead and just download it and then follow the installation instructions to install it.
Once you have it installed, we're going to go ahead encode video using it. Okay, so once you've installed HandBrake, go ahead and launch it. Remember, it's available on both Mac and PC versions. There are some slight interface differences, but nothing worth writing home about and certainly nothing that we can't handle. So, what I want to do now is first off I can look at these presets, and they do have some presets for your video files. One of those presets, and you have to basically tell it you want to encode a video in order to see them, so I'm going to click Source. Again, I'm going to go to my Desktop/ Exercise_Files/Chapter_06/06_07/_video, and I want the QuickTime file that's our source.
Okay, cool! Now that I've chosen that, notice that I could choose some of these presets. One of the presets is the iPhone & iPod Touch preset. That's going to use the H.264 encoding, and it might be really all you need in order to encode your video, but you can also make some changes as well. So, that could be kind of a nice starting point for you if you wanted to do that. I'm going to toggle those presets back off again, but you can really kind of do anything that you want to there. I'm going to click Web optimized from my options. That helps to assist with the streaming of it.
Also, notice that I can choose a destination for where this is going to go and what I want to call this. So, I'm going to Browse. I want to go into my Exercise_Files/ Chapter_06/06_07/_video, and we'll put it in there. I'm going to leave the name the same and just make sure it has the MP4 extension. Now again, I can go down here and choose specific things. I've a Video Codec, and I want to use the H.264. I can make sure the Frame rate is Same as source. I could target a specific size for the video file if I wanted. I could target an average bit rate for a connection speed, or I could choose how much compression I want by using the slider, and apply either more compression or less compression based off of that.
Every single video is a unique thing, kind of like a snowflake. So, I can't tell you that once that compression going to work over another. You're just going to have to play around with that little bit, and try different settings for your video. Just remember a couple of rules of thumb. If there's a lot of fast motion or complicated patterns in your video, you want less compression. If you have a talking-head video where nothing really changes that much, you could probably get away with a little bit more compression. Same thing with Audio, I'm going to go over to Audio. I could use whatever sample rate or bit rate that I want. I just want to make sure that the audio codec I'm using is the AAC audio codec. It is.
That's exactly what I need there. Now, I've got a couple of other things at HandBrake I want to talk about. You've got this Picture Settings, which is really nice. This allows me to declare the size of video and again, I'm just going to leave that the same as it is before. That lets me do any cropping that I want or run any filters that I want on this. In this case, I don't want that, just as a word of difference between the PC and the Mac. On the PC, you'll find picture right here beside video, o you'll find it on this tab instead of up here. I also have a Preview window that shows me what my video is going to look like IIS encoded.
So, I could scrub through this and I could check to make sure the video is doing what I want it to do. Okay, so it sounds like everything is coming through just fine. I'm going to close that. Now, I'm ready to go ahead and encode this. So, all I have to do is hit Start and it's going to go ahead and encode the video for me. Again, really quick, because it's a very, very small, short video. So now, we have two versions of our video, which is going to allow us to deliver HTML5 video through most modern browsers. In the next movie, we'll explore what it takes to add our new video to our trail guide page through using HTML5 video.
There are currently no FAQs about HTML5 First Look.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.