You’re reading an article by Jay Robinson, a designer living in California.

Reminder: QuickTime Embeds

Okay, so you know how to make an opti­mized video for the Web with Hand­Brake­CLI, now let’s embed that bad boy into the web­page. … Oops. I always for­get how to do Quick­Time Embeds. They are a rather involved affair so the name is quite ironic. Any­way, this post is mostly a reminder to myself, but it pleases me if it helps you. I’ve included a .zip file at the bot­tom so that you may exper­i­ment on your own.

Code

First we cre­ate an object, spec­i­fy­ing a width and height. An object looks like this:

<object width="640" height="496">
    <param name="" value="" />
</object>

In order to trick Inter­net Explorer into read­ing this cor­rectly, we have to talk to the ActiveX con­troller. So we tell it our codebase and classid. When­ever you’re going to insert a QT movie, use:

codebase = "http://www.apple.com/qtactivex/qtplugin.cab"
classid  = "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

Bet­ter browsers were designed to use the embed ele­ment for media. So we nest an embed within the object so that all browsers see the media file.

An embed can be a self clos­ing ele­ment, or not. It doesn’t need para­me­ters, just dupli­cate all your key/value pairs here as attrib­utes (except for codebase and classid which are only for IE). Your embed may look similar:

<embed 
    width       = "640"
    height      = "496" 
    type        = "video/quicktime" 
    pluginspage = "http://www.apple.com/quicktime/download/" 
    href        = "my_video.mov" 
    src         = "my_poster_image.png"
    bgcolor     = "#333" 
    controller  = "false" 
    autoplay    = "false" 
    scale       = "aspect" 
    target      = "myself">
</embed>

Con­clu­sion

The final code will look some­thing like this; a fine, hot mess:

<object
    width    = "640"
    height   = "496"
    codebase = "http://www.apple.com/qtactivex/qtplugin.cab"
    classid  = "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
    <param name = "href"       value = "my_video.mov" />
    <param name = "src"        value = "my_poster_image.png" />
    <param name = "controller" value = "false" />
    <param name = "autoplay"   value = "false" />
    <param name = "scale"      value = "aspect" />
    <param name = "target"     value = "myself" />
    <embed  
        width       = "640"
        height      = "496" 
        type        = "video/quicktime" 
        pluginspage = "http://www.apple.com/quicktime/download/" 
        href        = "my_video.mov" 
        src         = "my_poster_image.png"
        bgcolor     = "#333" 
        controller  = "false" 
        autoplay    = "false" 
        scale       = "aspect" 
        target      = "myself">
    </embed>
</object>

Note: Remem­ber to add 16 pix­els on to the height of your object and embed to acco­mo­date the Quick­Time con­troller. Oth­er­wise it will be clipped off. For exam­ple, a nor­mal 640×480 video would need to have an object and embed con­tainer height of 496 pix­els. You will also need to acco­mo­date for this in your poster image if you wish to offer a refined experience.

Not all these attrib­utes are nec­es­sary, and in fact you can make the QT player exhibit dif­fer­ent behav­ior if you exper­i­ment with it a bit. This doc­u­ment from Apple.com is help­ful: Includ­ing Quick­Time In A Web Page. Read the whole thing.

I’ve made a 1.3MB .zip file with video, poster image and code so that you may exper­i­ment. Down­load or see the Demo.

Short URL: http://jwr.cc/x/20