If I want a movie to play in a Web site I design, I don’t want to upload it to YouTube and then embed the resulting YouTube window in my Web page. I want to have complete control over the content and how it is displayed.

Web browsers don’t all play movies in the same way. Apple tries to help out by offering a movie package creation facility in QuickTime Player. (At least it did before Mavericks. The version of QuickTime Player bundled with Mavericks no longer has this capability. This tutorial is for those using Lion. It may work with Mountain Lion and earlier incarnations of the operating system, but I haven’t checked this.) The package includes a variety of movie formats, a movie poster image, a sample Web page containing your movie and a set of scripts to make it all work. Unfortunately, in my experience at least, it just does not work in all browsers. The procedure described below uses some of the files QuickTime Player generates, but the rest are tossed and a different course is adopted. Unlike Apple’s procedure, though, as it stands mine does not automatically deliver movies of filesizes tailored for particular devices on which they are being viewed.

Things are made somewhat simpler by the advent of HTML5. A couple of books you might find helpful in working with HTML5 are:–

• HTML and CSS Visual Quickstart Guide, Eighth Edition by Elizabeth Castro and Bruce Hyslop
• HTML5 Cookbook by Christopher Schmitt & Kyle Simpson.

Don’t be frightened by the length of this document. I have been at pains to be as explicit as possible, so one knows exactly what to do at each step. The hardest, and most time-consuming, parts are the editing of the movie and the design of the Web page, but this was always going to be the case. The only super-technical thing is fixing the bug in the Miro Video Converter application (which only has to be done once), but I found this gratifyingly straightforward and nowhere near as intimidating as one might anticipate. Apart from Final Cut Pro, which is not absolutely necessary, it can all be done with free software. If you do have Final Cut Pro, you should use my instructions for Final Cut Pro instead of what follows.

Obviously, things won’t work as expected if you neglect to Save your alterations to the relevant files before viewing the page in a Web browser. Similarly, you may need to Reload a page in your browser in order to view the finished product of your labors properly.

1. Provide yourself with an editable version of your movie.
2. Edit the movie, preferably in Final Cut Pro.
3. Use QuickTime Player to create a package of files for adding your movie to your Web site.
4. Ensure you have a convenient and scalable directory structure on your Web site.
5. Transfer essential files from the file package to an appropriate location in your off-line Web site directory and do some renaming.
6. Create additional versions of your movie so that it is accessible in all Web browsers.
7. Insert special code fragments in the source code for the Web page and ensure that the names and paths of referenced files are correct.

QuickTime Player does not allow fine enough control to edit movies accurately and with ease: for serious projects, it is much better to use (the admittedly more expensive — but worth it!) Final Cut Pro to edit your movie. However, although Final Cut Pro can open most video formats, it cannot open DVD-Video files. So, if you are starting with a DVD-Video movie, first use DVD ripper software, such as the open-source HandBrake application which I use here, to convert the DVD’s files to MP4 File format, as follows. (Note that HandBrake cannot subvert DVD Region Codes.) If you aren’t starting with a DVD-Video movie, you can skip straight to Step 2 below.

1. Open HandBrake.
2. File > Open Source…
3. Navigate until you can select the folder containing the AUDIO_TS and VIDEO_TS files, then click on the “Open” button.
4. Click on the “Format” drop-down menu (even if it is already showing “MP4 file”) and choose the “MP4 file” option.
5. Click on the “Start” button at the top of the HandBrake window.
6. The resulting file will have file extension “.m4v” and, being a compressed file, be considerably smaller in filesize than the original.
7. You can now Quit HandBrake.

Edit your movie in Final Cut Pro:–

1. Open Final Cut Pro.
2. File > Import > Media…
3. Navigate until you can choose the movie file you wish to edit.
4. Edit the file in Final Cut Pro, as desired.

Export the final version of your movie from Final Cut Pro to QuickTime Player:–

1. (Still in Final Cut Pro) File > Share > Master File (default)…
2. In the Master File window that opens, click on the “Settings” button.
3. In the “Open with” drop-down menu, choose “QuickTime Player (default)”.
4. Click on the “Next” button at the bottom of the window.
5. Navigate to where you wish to Save your file and click on the “Save” button.
6. The movie file now opens in QuickTime Player.
7. You can now Quit Final Cut Pro.

Use QuickTime Player to create a package of files for adding your movie to your Web site:–

1. File > Export for Web…
2. Alter things in the little window that appears, as desired. (For example, I tick the “Cellular” and “Broadband” checkboxes.) Remember where you are saving things to!
3. Click on the “Export” button.
4. You can now Quit QuickTime Player.

In the Finder, locate the folder relating to what you have just exported from QuickTime Player. Within it you will find a “Resources” folder containing the files you will need to incorporate in your Web site.

It is convenient for your Web site to have in it a folder called “web” that contains a folder called “movies”.

Each movie should have its own folder within the movies folder. Suppose we have one such folder called “park”.

Within this folder, place the following files that have been generated by QuickTime Player and are now situated inside that Resources folder we saw at the end of Step 4 above. The .m4v files correspond to your choices in the checkboxes mentioned in Step 4 above; eg, you might also need to transfer a Wi-Fi version if you ticked its checkbox in that Step.

1. Park - Broadband.m4v
2. Park - Cellular.m4v
3. Park.jpg

You can now Trash that Resources folder.

Rename each of the files you moved to your movie folder thus:–

1. Make everything lowercase.
2. Replace “ - ” [that’s “space hyphen space”] with the underline character [“_”].
3. Change the “.m4v” file extension to “.mp4”.

For compatibility with all browsers, you also need two other versions of each of your .mp4 files (viz, .webm and .ogv files). You can use the Miro Video Converter application for this purpose, but note that conversion to .ogv files results in movies of poor quality: this is rectified by using Max Duveen’s fix. This fix only has to be applied to the application once — not each time you use it. You could have used Miro Video Converter instead of QuickTime Player to do the initial conversion, but QuickTime Player has provided you with a variety of file sizes and a movie poster (viz, that .jpg file).

1. Open Miro Video Converter (now called “miro” if you have implemented the above fix).
2. Drag the .mp4 file onto the top part of the window.
3. Click on the “Format” button below and choose Video > WebM SD.
4. Click on the “Convert to WebM SD” button.
5. When the conversion is finished, click on the “Show File” link near your source file in the upper part of the window. The converted file appears in a folder called “Miro Video Converter” within your computer’s main “Movies” folder (which is different from the “movies” folder mentioned in Step 5 above).
6. Remove “.webmsd” from the filename. The file extension will be “.webm”.
7. Return to Miro Video Converter, click on the “Format” button again and this time choose Video > Ogg Theora.
8. Click on the “Convert to Ogg Theora” button.
9. When the conversion is finished, click on the “Show File” link again to find the converted file.
10. Remove “.oggtheora” from the filename. The file extension will be “.ogv”.
11. Repeat all of the above for each of your .mp4 files.
12. You can now Quit Miro Video Converter.
13. Move these converted files from the “Miro Video Converter” folder to the appropriate movie folder alluded to in Step 5 above [so they now reside with your .mp4 file(s) and the .jpg movie poster file].

1. Open the Web page in question in a text editor (eg, BBEdit, Nisus Writer).
2. Ensure the page begins with (ie, has placed above the <head> tag) the following lines of code, with the lang attribute altered appropriately if you want a language other than English:–

   <div id="park_movie" align="center">

   <video controls width="714" height="576" poster="web/movies/park/park.jpg">

   <source src="web/movies/park/park.mp4" type="video/mp4" alt="Movie of park" />

   <source src="web/movies/park/park.webm" type="video/webm" alt="Movie of park" />

   <source src="web/movies/park/park.ogv" type="video/ogg" alt="Movie of park" />

   Unfortunately, there is a problem displaying this movie on your device. Sorry.

   </video>

   </div>

3. Note that the three source-tagged lines in this code relate to a single .mp4 base movie called “park.mp4”. If instead we had separate broadband and cellular versions, as in Step 4 above, we would need a set of three files based on park_broadband.mp4 and another set of three files based on park_cellular.mp4. (Note that, as yet, the instructions on this page do not enable serving of a particular movie file to a particular device.)
4. In the above lines of code:–
   1. Alter the poster size as required. [You may wish to scale the above dimensions by, say, two-thirds (viz, 476 x 384) or a half (viz, 357 x 288).]
   2. Alter the alt attributes as required.
   3. Ensure all the filepaths are correct. Note that these lines of code assume that the page in question is at the same directory level as your web folder. If this is not the case, alter the path to the web folder in each line of code where it is necessary to do so.
   4. Note that "video/ogg" is not a misprint.
5. The location of the various elements on the page (as viewed in a browser window) can be altered as desired in the page’s style sheet. I have included align in the HTML code here to illustrate another approach.

At last, you are ready to upload your work to your Web site server!