Okay, so you know how to make an optimized video for the Web with HandBrakeCLI, now let’s embed that bad boy into the webpage. … Oops. I always forget how to do QuickTime Embeds. They are a rather involved affair so the name is quite ironic. Anyway, this post is mostly a reminder to myself, but it pleases me if it helps you. I’ve included a .zip file at the bottom so that you may experiment on your own.
Code
First we create an object, specifying a width and height. An object looks like this:
<pre><object width="640" height="496">
<param name="" value="" />
</object></pre>
In order to trick Internet Explorer into reading this correctly, we have to talk to the ActiveX controller. So we tell it our codebase and classid. Whenever you’re going to insert a QT movie, use:
<pre>codebase = "<a href="http://www.apple.com/qtactivex/qtplugin.cab">http://www.apple.com/qtactivex/qtplugin.cab</a>"
classid = "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"</pre>
Better browsers were designed to use the embed element for media. So we nest an embed within the object so that all browsers see the media file.
An embed can be a self closing element, or not. It doesn’t need parameters, just duplicate all your key/value pairs here as attributes (except for codebase and classid which are only for IE). Your embed may look similar:
<pre><embed
width = "640"
height = "496"
type = "video/quicktime"
pluginspage = "<a href="http://www.apple.com/quicktime/download/">http://www.apple.com/quicktime/download/</a>"
href = "my_video.mov"
src = "my_poster_image.png"
bgcolor = "#333"
controller = "false"
autoplay = "false"
scale = "aspect"
target = "myself">
</embed></pre>
Conclusion
The final code will look something like this; a fine, hot mess:
<pre><object
width = "640"
height = "496"
codebase = "<a href="http://www.apple.com/qtactivex/qtplugin.cab">http://www.apple.com/qtactivex/qtplugin.cab</a>"
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<br />
width = "640"
height = "496"
type = "video/quicktime"
pluginspage = "<a href="http://www.apple.com/quicktime/download/">http://www.apple.com/quicktime/download/</a>"
href = "my_video.mov"
src = "my_poster_image.png"
bgcolor = "#333"
controller = "false"
autoplay = "false"
scale = "aspect"
target = "myself">
</embed>
</object></pre>
Note: Remember to add 16 pixels on to the height of your object and embed to accomodate the QuickTime controller. Otherwise it will be clipped off. For example, a normal 640×480 video would need to have an object and embed container height of 496 pixels. You will also need to accomodate for this in your poster image if you wish to offer a refined experience.
Not all these attributes are necessary, and in fact you can make the QT player exhibit different behavior if you experiment with it a bit. This document from Apple.com is helpful: Including QuickTime 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 experiment. Download or see the Demo.
Short URL: http://jwr.cc/x/20
Leave a Reply