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. Hence the need to provide multiple versions of a movie on a Web site, and hence the need for the machinations described on this page.

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.

I find the following procedure works for me. As it stands, however, it does not automatically deliver movies of filesizes tailored for particular devices on which they are being viewed.

Note that these instructions apply to Final Cut Pro X 10.0.9. If you do not have Final Cut Pro, you may use QuickTime Player instead, albeit with more limited editing capability.

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. 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. I offer a tutorial on Getting Started in Final Cut Pro elsewhere on this Web site.
5. Be sure to have the Spatial Conform “Type” set to “Fill” for all the appropriate component clips. Instructions on how to do this are given in that tutorial.

We first create a poster image:–

1. (Still in Final Cut Pro) Position the playhead over a frame that will make a suitable still for a poster image.
2. File > Share > Save Current Frame…
3. In the “Save Current Frame” window that opens, click on the “Settings” button.
4. In the “Export” drop-down menu, choose the desired format (eg, JPEG).
5. Check the “Scale image to preserve aspect ratio” checkbox.
6. Click on the “Next” button at the bottom of the window.
7. Navigate to where you wish to Save your file and click on the “Save” button.

Now export your movie to MPEG-4 format:–

1. (Still in Final Cut Pro) File > Share > Apple Devices 720p…
2. In the “Apple Devices 720p” window that opens, click on the “Settings” button.
3. In the “Format” drop-down menu, choose “Publishing > Apple Devices”.
4. In the bottom-most drop-down menu, choose “Do Nothing”.
5. Click on the “Next” button at the bottom of the window.
6. Navigate to where you wish to Save your file (probably the same place you saved the poster image) and click on the “Save” button. This file will be saved with the file extension “.m4v”. [If you look at the file’s location in the Finder straight away, you may observe that it has file extension “.m4v-TEMP”. The “-TEMP” suffix disappears in a short space of time (eg, ∼15 secs for a 15 MB file).]
7. You can now Quit Final Cut Pro.

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

Each movie should have its own folder within the movies folder. We will suppose in this tutorial that we have one such individual movie folder called “park”.

Within your individual movie folder, place the essential files you created in Step 3 above. Thus our “park” folder will contain:–

• park.jpg
• park.m4v

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

1. Make everything lowercase.
2. Replace any spaces with (say) the underline character [“_”].
3. Change the “.m4v” file extension to “.mp4”.

Use image editing software (such as Apple’s Preview or Lemke Software’s GraphicConverter) to crop the poster image to 714 x 576 pixels. These figures are chosen to be the same as the frame size given in the Info Inspector of Final Cut Pro. If your frame size is different, you should alter the figures in this paragraph, as well as those in the code in Step 7 below, accordingly.

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.

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 4 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 individual movie folder alluded to in Step 4 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:–

   <!DOCTYPE html>

   <html lang="en">

3. In the <body> section of the page insert the following lines of code:–

   <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>

4. 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, 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.)
5. 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), a half (viz, 357 x 288) or a third (viz, 238 x 192).]
   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.
6. 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!