A Valid Way to embed QT Content
May 26th, 2006
Well since posting my previous code I've been doing some experimenting and I also found a useful page which discussed embedding QT into XHTML whilst still supporting all browsers!
Here's some sample code:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="500" height="341">
<param name="src" value="http://creativeflux.co.uk/videos/applestoreslideshow.mov" />
<param name="controller" value="false" />
<param name="autoplay" value="true" />
<object type="video/quicktime" data="http://creativeflux.co.uk/videos/applestoreslideshow.mov" width="500" height="341" class="mov">
<param name="controller" value="false" />
<param name="autoplay" value="true" />
</object>
</object>
This will embed the movie into your site but it won't play in IE until you hide the second object from it which you can do with CSS:
* html object.mov {
display: none;
}
The * selector is only recognised by IE so this is a suitable way of filtering the code. Once again I'd like to mention that not all of this code is my own, but I'm simply posting this because it's a frequently asked question in some forums I've visited!
Anyway, I'm an avid user of Textmate and the HTML bundle included has a snippet for embedding QT movies but it isn't valid so here's a snippet for any Textmate user to add themselves with the bundle editor. I will look into getting it added properly though! (*note* you'll still have to add the CSS code even if you use this snippet)
<object width="$2" height="$3" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="$1" />
<param name="controller" value="$4" />
<param name="autoplay" value="$5" />
<object type="video/quicktime" data="${1:movie.mov}" width="${2:320}" height="${3:240}" class="mov">
<param name="controller" value="$4" />
<param name="autoplay" value="$5" />
</object>
</object>
Happy Embedding
