Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
To encode our MP4 H.264 video files we are going to be using HandBrake. HandBrake is a free application built on open source encoding tools and you can get it at the Web address handbrake.fr. To download it you can click on the Download link and the appropriate version for your system. When you open HandBrake you'll be prompted to select a video and we're going to use our source file, which is in or Exercise folder and _video and it's our podcast.mov. That's our source file, so I am going to open that up.
Okay, now the first thing you want to do is click on the iPhone and iPod Touch preset. Now if this Preset window isn't open you can toggle it with the button in the upper right-hand corner. I'll click on the iPhone & iPod Touch preset and what that does is trigger a number of basic settings including the baseline profile for H.264. There are three H.264 profiles. Baseline, main and high. The iPhone3 and 3GS as well as the number of other devices require the baseline profile to playback the video.
All right, next we want to check our Picture Settings and we can do that with the Picture Settings button at the top of the window, and then click on Preview, and if you scrub in a little bit you can see the basic output of the video, and it looks right to me. The size looks correct. Sometimes you need to play around with the Anamorphic setting and make sure that it's going to output to the right size that you want it to. But this looks good to me, so I am going to go ahead and close the window and close the Picture Settings, and the next thing we want to do is click the Web optimized setting and what that does is put the metadata at the beginning of the file so the browser can know extra information about the video as soon as it starts downloading the video data.
All right, now let's set a place to store the file once it's done and we are going to put it in our encoded folder in the same video files folder, and actually I am going to name it podcast.mp4. m4v, the extension they had there, isn't wrong, but we've been using mp4 for the other version. So to keep it consistent I am going to use mp4. I am going to save that and then click Start and the video encodes and we're already done, great. So that's basically all you need to do.
Feel free to play around with the other settings or read up on what they do, but this should give you a video file that would work on the web. Now let's plug this into our video tag so we can see it in action. If we go over to our code, I am going to take our MP4 source and just change it to the one that we have in the encoded folder. That's in the same video files folder, so encoded so that's podcast, and just to kind of see it work. And since it's MP4 we need to open it in a browser that supports MP4, so I am going to use Safari.
So if we reload that page and play the video-- (Music playing) You can see it works, and you can tell it's not the version we were using before because the version I was using before had an MP4 watermark in the lower right-hand corner. So this is the one that we just encoded. All right, so we've successfully encoded in MP4 H.264 file and next we'll do an Ogg and WebM version.
There are currently no FAQs about HTML5: Video and Audio in Depth.
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.