Adding Video and Audio - HTML5 Foundations - page 211

Now that you know about the various audio and video formats supported by modern web browsers, it's time to pre-
pare the video files for the Joe's Pizza Co. website. In this section, you use a free tool called Firefogg to convert an
MP4 file to OGV and WebM.
If you have trouble converting these video files, you can find copies of the converted files in the videos subfolder
within folder 1 of the download code for Chapter 11.
To save you from having to download multiple copies of these video files (one set for each code folder), I placed
the videos in folder 1 of the download files. If you need to view the About page from any of the other code folders
in your browser, please copy the video files from folder 1 into the desired code folder; otherwise the video will not
load.
Also, I have a confession to make. The video file you will use is actually a sketch involving Mike the Frog, the mas-
cot from TeamTreehouse.com. Ideally, when you create websites for businesses in the wider world, you will use a
more relevant video. This one, however, is just fine for teaching you all about HTML5 video.
Here are the steps to convert an MP4 file:
1. Create a new folder in your project directory and name it videos .
2. Download the mikethefrog.mp4 file from this topic's website at http://wiley.com/go/tree-
house/html5foundations (video courtesy of © Treehouse Island, Inc.). You can find the file in the
chapter11/1/videos folder of the download files.
3. Place the mikethefrog.mp4 file in the videos folder that you created within your project directory.
4. The Firefogg converter requires that you are using Firefox. If you do not already have Firefox installed, you
can download it from http://www.mozilla.org/en-US/firefox/new/ .
5. Open Firefox and go to http://firefogg.org .
6. Click the button that reads Install Firefogg. This will install a Firefox extension. Click Allow and Install
Now on the dialogs that appear. You may need to restart Firefox when the installation is complete.
7. Navigate to http://firefogg.org/make/index.html using Firefox.
8. Click Select File and select the mikethefrog.mp4 file from your videos folder.
9. On the page that loads, make sure WebM (VP8/Vorbis) is selected in the format drop-down menu. Select the
1080p option from the preset drop-down.
10. Click the Encode button and save the video file in the videos folder as mikethefrog.webm . Firefogg
may take a little while to encode the new file. Once Firefogg completes the encoding, you should be presen-
ted with the video; the application also saves a copy of the new video in your videos folder.
11. Repeat Steps 7 to 10, this time selecting the Ogg (Theora/Vorbis) option from the
format drop-down menu.
12. Check that the two new video files ( mikethefrog.webm and mikethefrog.ogv ) are in your
videos folder; then close Firefox.
You now have all the video files you need for the rest of this chapter. In the next section, you embed these video files
into your About page.