How to Embed Quicktime Videos on your Website

I spent the better part of today trying to figure out how to host and play video files on my website. This caused me endless hours of frustration, probably because I was trying to use Dreamhost’s QuickTime streaming service. It doesn’t work…or at least I wasn’t able to figure out how to make it work, and believe me I tried (grr). In the course of surfing around the web to find help (could Dreamhost’s support wiki be any more worthless??), I pieced together a solution. Here are the steps:

1. Prepare your video file with QuickTime.

• Open the file with Quicktime
• Export the file using “Movie to QuickTime Movie” setting (see below). Make sure you select the “Prepare for Internet Streaming” option and select “Fast Start”

2. Upload the file to your site. I created a new “media” folder (e.g., domain.com/media) for all my movie files.

3. Create a new html page and save as a regular html file (i.e., with .htm or .html extension). Here is the code to embed the video file:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="640"
height="496"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<embed src="/media/sample.mov" width="640" height="496" autoplay="false"></embed>
</object>

Note that you want to add 16px to the height value to show the controls on the bottom of the video player.

I have tested this in Firefox and Safari and it works fine, still need to get on a PC to test it in IE. I’m using QuickTime Pro Version 7.4.1 hosting with Dreamhost.

Here’s an example of the final product.