Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
To encode our OGG and WebM formats, we're going to use Firefogg. Firefogg is a free plug-in for the Firefox browser you can find at firefogg.org. When you first come to the Firefogg page you'll have the option of downloading and installing the plug-in. Once you've done that, you should see this green box that says Firefogg installed. From there click on the Make web video link and then Select file. We are going to use the same source file that we used for. It's in our _video folder, podcast.mov. And then we were presented with a list of settings.
First thing I am going to do is click the Preset list and under the Settings drop-down we're going to select the Ogg high quality Theora format, because it has a maximum width of 1080 pixels. You can see the other ones have maximum width of 200 and 400, which is smaller than the video size that we're using. And so this isn't going to set the video size to 1080. It's just going to make sure it fits within there and since ours is 480 pixels wide, this is the one that we want to use. Now you can dig through the additional menus and try different settings if you have additional needs for the video, but otherwise this will create a usable video for us.
So we can go ahead and click Encode to File and we'll save this in our encoded folder as podcast.ogv. Now that that's done, we can even watch it in the browser. (Music playing) That's looking good. So let's go ahead and click OK and we can go right into making our WebM version. We can use the same source file and under the Settings menu we can select the WebM options, and for this one we can actually select the lower version because it has a max width of 480 pixels, which is the exact size that we want our video to be.
So we're going to go ahead and select that one and again we can play around with the other settings but this should give us a file that will play on the web. So we'll click Encode to File and name it podcast.webm. Okay, great! Now that's done and we can test it in our browser. (Music playing) And that's working. Okay, so now we have both our Ogg and WebM files and let's go and plug those into our code. All right, just like we did with the MP4, I'm just going to add the encoded directory to our source files, both the WebM and the Ogg file.
I am going to save that and to preview those we're going to open it up in Firefox and reload the page. (Music playing) And it's working, and this will be playing the WebM version since that's the first one in the source list that Firefox can support. So I am just going to go ahead and actually just comment out the WebM version just really quick to test the Ogg version. All right, so that's commented out and if we go back to Firefox and reload. (Music playing) Now it's playing the Ogg version and that's working as well.
And again, you can tell it's not the versions we were using before because those had a watermark burn in the corner that would tell us the type of format it was. All right, so now you know how to encode all the HTML5 video formats, and for free at that. Let's move on to encoding audio formats.
Get unlimited access to all courses for just $25/month.Become a member
110 Video lessons · 47341 Viewers
86 Video lessons · 9721 Viewers
350 Video lessons · 99633 Viewers
79 Video lessons · 13273 Viewers
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.
Your file was successfully uploaded.