Join Tom Green for an in-depth discussion in this video Creating a WebM video, part of Up and Running with HTML5 Video.
The new kid on the video block when it comes to HTML5 video is an open standard called WebM, and you can learn a lot about it just by coming to this web page. But we're going to be concentrating on creating WebM rather than reading about it. Though there are a number of applications that allow you to create a WebM file, I will be concentrating on two encoders. The first is an online encoder from Firefogg.org, which is a Firefox plug-in. The second is the MiroVideoConverter, which is available in both Macintosh and PC versions.
Why two encoders? I, personally, prefer to control the encoding process, and tweak the settings to my satisfaction and Firefogg gives me that capability. For those of you who want a simple, point and click encoding experience, you just can't go wrong with Miro. So, let's get started. And to get yourself started, just open Firefox and point your browser to Firefogg.org. When the page opens, you'll see a little red box here that says, install Firefogg, click the link and it will give you some information about it.
And then you click, Install Now, and you notice that you're going to have to restart Firefox to get into Firefogg, which is not bad. So, we'll restart the browser and start creating some video. Notice that when you come back it tells you Firefogg is installed. Click the Make Web Video link to open the encoder. The first step in the process of course is to select the file that you're going to encode. The file is located in your Exercise folder. Click the Select File button and navigate to your Video 05 Exercise folder for this chapter and the file that we're going to be using is CableCar.mp4.
Click the Open button and there it is. You will see that Firefox has found the video, extracted the important metadata from the file And selected a format and a preset. If this works for you, you can click and code, but let's take a look under the hood before we do that. Click the Advanced Options button. This is why I like this feature, you control the process, the software doesn't control the process. Let's work our way through this dialog box. The format has already been selected, it's WebM VPA Vorbus.
What we're going to do is to enter the width and the height. And the width is 720 and the height is 480. The frame rate that we're going to use here is the standard video frame rate for the web, 30 frames per second, because there's lot of motion in it. And because this is an HD file, we're going to use an aspect ratio of 16, nine. So, you enter 16: 9. Bit rate we're going to set to 2300 kilobytes per second, which will get us to play on everything. Now, let's jack the quality to ten, which is the best of all.
Key frame interval, ignore. Let the software do that, but what we are going to do is select two pass encoding. And what that will do is, on the first pass look for changes in the video, note where those changes are. And on the second pass, we'll actually do the compression. Making sure the audio checkbox is checked, select mono from the channels, and reduce the sample rate to 22050. All this does is reduce the file size and gives you a small quality reduction but nothing major.
You will be asked where to save the file when you click the Encode button. So, what we're going to do is click Encode. It's going to ask you where to save it, and we'll save it to the the same folder as the MP4 file and click Save. Encoding process completes itself. Firefogg will launch the file in a player in the browser to let you preview how it will look. And here it is, and if you click the Play button.
(MUSIC) So, you've now created a WebM file, and the resulting WebM file is in the same folder as the original MP4. Now, let's go take a look at Miro. When the window opens you will see that there is just a great big green Download button. And the great thing about working with this converter is you can work with Windows or Macintosh versions of the converter. I'm going to download the Miro converter for Macintosh and I'm going to open it when the disk opens. When it's downloaded, I can just simply take the bow tie application here, and drop it right into the application folder.
And you can see that the Miro Video Encoder is now part of your applications on the Macintosh. You can quit Firefox now, and let's start using the Miro Video Encoder. So, locate your download, double click it to launch the application. When the interface opens, you have two choices. You can either drag the file to be encoded right into the interface, or you can click this Choose Files Link. In this case, I'm going to click the Choose Files Link. Navigate to the Exercise folder > Video 5.
There's the cable car MP4 file. And I'm going to click open. And you can see, it appears in the upper left-hand corner of the interface. Now, all you need to do is just select a format. So, you click the Format button, select WebM HD, because it is an HD video, and you can see that not much happens other than the fact that you can Convert to WebM HD. Click the Convert WebM HD button. And the file is now in the process of being converted. When the conversion is finished, the file will sport a little green check-mark and it's just coming up just now.
There it is. And to see the file, you click the Show File Link right here. And you notice it goes to a folder called Miro Video Converter. Now, where is that found. That's found in the Movies folder. If you go to your Movies folder, there's the Mira Video Converter. If I scroll down, there's the cable car WebM file. And if I want to preview the file, all I have to do is double-click the Cable Car WebM file, and it will open in Firefox. (MUSIC) As you can see, there really is no big difference between the MP4 version and the WebM version. So, we're going to close this, and one thing I'd like to urge all of you to do is to be aware of the file naming convention here for the Miro Video Converter. You will notice that there are two extensions: Webmhd and .webm. When you get into coding this stuff, this could get awfully confusing so one thing I do is I'll takea this webmhd extension.
And then I will move the file to where ever it's going to be for my web page. By the way, by removing that extension, you avoid potential coding errors when it comes time to write the code that plays the video. And speaking of code, now that you know how to create an MP4 and a WebM file, the next chapter shows you the code you need to know to play your videos.
- Understanding web video delivery challenges
- Understanding video containers or codecs
- Exploring bitrate
- Creating MP4 and WebM videos
- Using the video tag
- Preloading video
- Working with multiple formats
- Setting up autoplay