Hack 82. Host Your Video on a Web Site | Digital Video Hacks: Tips & Tools for Shooting, Editing, and Sharing (OReillys Hacks Series)

< Day Day Up >

Putting your video onto a web site is a fun and easy way to distribute it.

With the growth of broadband Internet connections, most people now have access to fast download speeds. Given this fact, it is reasonable to expect your viewers watch your movie in a web browser, or download it to their hard drive to watch it using a media player. However, the size of an uncompressed digital video is still too large to be reasonably distributed online. Therefore, you need to compress your video for online distribution.

This hack covers the creation of video suitable for downloading from a web site. If you are planning on placing a video that is longer than 15 minutes, you should evaluate using streaming video [Hack #83].

7.8.1. Exporting Your Video

To compress your video for use on the Web, you can export it from your editing system:

Avid: File Export Options QuickTime Movie
Final Cut: File Export sing QuickTime Conversion…
Movie Maker: Tasks Finish Movie Send to the Web
Premiere: File Export Movie Settings button
iMovie: File Share QuickTime Compress movie for: Web

Some editing applications have presets, so all you have to do is select the preset and let the system to the rest. These applications do allow you access to more expert settings, if you want more control over the compression, but you might need to look for them. Other editing systems do not offer any presets and require you to configure the compression manually.

7.8.2. Configuring the Compression

If you need, or want, to configure the settings for compression, you will want to be familiar with the available codecs [Hack #77] and be able to select a file format. You should be aware that there are a lot of codecs available. Sticking to the major standards, and those that are widely distributed, will bring you more success with your viewers.

How you manually configure the export settings will vary, depending on which editing application you are using. As a general rule, you should attempt to keep your resulting file size as small as possible. To do so, you can do the following:

Export your video at half-resolution. For example, if you are editing NTSC DV footage (720 x 480), scale your video to 360 x 240.
Reduce the frame rate to 12 or 15 frames per second.
Use a codec targeted at online video distribution, such as MPEG-4.

7.8.3. Creating the Web Page

Enabling people to view your video on a web page requires the video to be embedded in the page. The file format you have chosen for your video will determine the HTML you need to type for your web page. To start your page, type the following:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">     <html>     <head>     <title>My Movie Page</title>     </head>     <body>

Then, add your embedding information.

For QuickTime files:

     <object docEmphasis">Player" class      width="360" height="240" codebase=http://www.apple.com/qtactivex/qtplugin.cab      type="video/quicktime">     <param name="src" value="./myMovie.mov">     <param name="controller" value="true">     <embed src="/books/4/224/1/html/2/./myMovie.mov" width="360" height="240" controller="1" pluginspage="http://     www.apple.com/quicktime/download/">     </embed>     </object>

For Windows Media files:

      <object docEmphasis">Player" classid:"clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"     width="360" height="240" codebase="http://activex.microsoft.com/activex/controls/mplayer/     en/nsmp2inf.cab#Version=6,4,7,1112" type="application/x-oleobject">     <param name="url" value="./myMovie.avi">     <param name="showcontrols" value="true">     <embed type="application/x-mplayer2" src="/books/4/224/1/html/2/./myMovie.avi" width="360" height="240"     controller="1" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/">     </embed>     </object>

For MPEG files:

     <object data="./myMovie.mpg" width="360" height="240" type="video/mpeg">      </object>

Finally, end the web page with:

     </body>     </html>

After typing out your video page, save it to your hard drive and name it with the file extension of .htm or .html.

Replace any information you deem necessary, such as the src, url, or data attributes that refer to your video file. For example, if your video file is named MyGreatMovie.mov, replace both instances of myMovie.mov in the HTML with MyGreatMovie.mov. You can also change the video's width and height, as well as whether the viewer should be able to control the video.

The ./ in front of the video file's name instructs the viewer's web browser to locate the video file in the same location as the HTML file. You can replace this with the specific path to where your movie will be located on the web server where you will upload your files, or you can leave it alone and simply upload both your HTML file and your video file to the same location.

7.8.4. Placing Your Files on the Server

Your server administrator will be able to provide you instructions on how and where to upload your files. There are many different methods to upload files, and every administrator handles access to the server differently. That said, you will have only two files to upload to the server: your video file and your HTML file.

After uploading your files, open a web browser and point it at your new web page. Within a few minutes, you should be watching your video and you and your viewers will be able to do so from anywhere in the world.

< Day Day Up >