Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Encoding video

From: HTML5 First Look

Video: Encoding video

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.

Encoding video

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.

Show transcript

This video is part of

Image for HTML5 First Look
HTML5 First Look

50 video lessons · 74383 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 3m 56s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 50s
    3. Who is this course for?
      1m 5s
  2. 21m 12s
    1. Exploring prior standards
      4m 26s
    2. Why do we need HTML5?
      3m 32s
    3. HTML5 timeline
      4m 24s
    4. Current HTML5 support
      4m 25s
    5. What HTML5 is (and what it isn't)
      4m 25s
  3. 27m 49s
    1. HTML5 vs. HTML4
      3m 25s
    2. New structural tags
      6m 1s
    3. New content tags
      4m 7s
    4. New application-focused tags
      5m 32s
    5. Deprecated elements
      4m 28s
    6. API overview
      4m 16s
  4. 22m 29s
    1. Content models
      5m 33s
    2. Understanding the outline algorithm
      3m 21s
    3. The role of ‹div› tags
      4m 20s
    4. Using ID and class attributes
      2m 6s
    5. DOCTYPE declarations
      4m 16s
    6. Character encoding
      2m 53s
  5. 41m 27s
    1. Basic page structure
      3m 40s
    2. Structuring top-level elements
      7m 30s
    3. Structuring interior content
      8m 42s
    4. Building headers
      9m 11s
    5. Checking document outlines
      5m 46s
    6. Ensuring cross-browser structure
      6m 38s
  6. 27m 53s
    1. New input types
      5m 57s
    2. Setting form autofocus
      2m 53s
    3. Using placeholder data
      4m 4s
    4. Marking required fields
      3m 24s
    5. Working with number inputs
      5m 49s
    6. Using date pickers
      5m 46s
  7. 1h 1m
    1. Canvas overview
      6m 21s
    2. Adding canvas content
      8m 58s
    3. Drawing in the canvas environment
      12m 9s
    4. Drag-and-drop API overview
      6m 18s
    5. Offline applications overview
      7m 11s
    6. Video overview
      5m 45s
    7. Encoding video
      8m 23s
    8. Adding video
      5m 58s
  8. 57m 33s
    1. Geolocation API overview
      5m 50s
    2. Web storage API overview
      5m 40s
    3. WebSockets overview
      4m 16s
    4. CSS3 overview
      6m 38s
    5. Enhancing typography with CSS3
      7m 42s
    6. Using @font-face
      7m 11s
    7. Styling HTML5 with CSS3
      10m 23s
    8. Using CSS3 transitions
      9m 53s
  9. 5m 6s
    1. Final thoughts
      3m 49s
    2. Goodbye
      1m 17s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.