It has at all times gotten my goat that Web Explorer’s non-standard use of the object tag has pressured standards-loving browsers to make use of the non-standard embed tag with a purpose to embed films on an internet web page. Even on Apple’s web site, the embed tag—a Netscape extension, for Pete’s sake!—is so entrenched that it’s onerous to even discover details about utilizing the object factor for QuickTime, besides in a non-standard approach.
Article Continues Beneath
Using embed has gone on too lengthy. Wishing for it to turn into a part of the official specs is like wishing your associate would begin placing the cap on the toothpaste. It’s not going to occur. It’s time to maneuver on. If you wish to validate your web site, you must do away with embed. On this article, I’ll present you ways.
On-line Films: Google Video and YouTube#section2
ALA readers will keep in mind Drew McLellan’s seminal article on Flash Satay. In that article, Drew described a way for inserting Flash animations on a web page with out utilizing the embed factor. Flash Satay has two components. First, Drew discovered that you need to use a single object factor to name Flash so long as you specify its sort adequately. Second, to correctly stream Flash films, you must embed a type of reference film.
I’ve been experimenting with Drew’s code on Google Video and YouTube content material. I used to be shocked to seek out that Google Video suggests you utilize solely the embed tag to embed their video on Internet pages. Alas, not shocked that they might recommend such a factor—simply shocked that it really works on Web Explorer, which stopped supporting the non-standard, however universally-supported embed tag years in the past in favor of its proprietary implementation of the usual object tag that renders that tag fully invisible to standards-loving browsers. It seems that IE helps embed so long as the customer has the suitable participant already put in. If not, they get an error and a generic broken-plugin icon, however no assist. YouTube, for its half, does the usually seen however hardly commonplace twice cooked strategy, providing each the object and embed tags.
Since each Google Video and YouTube serve films by way of the Flash participant—no matter your film’s format if you uploaded it—you need to use Drew’s single object technique to embed such films in your web page. Certainly, you don’t have to make use of the Satay a part of his code; films on Google Video and YouTube stream even with out the reference film he suggests. (Line wraps marked » —Ed.)
<object sort="utility/x-shockwave-flash"
knowledge="http://video.google.com/googleplayer.swf? »
8755581808731033658"
width="400" peak="326" id="VideoPlayback">
<param identify="film"
worth="http://video.google.com/googleplayer.swf? »
docId=8755581808731033658" />
<param identify="allowScriptAcess" worth="sameDomain" />
<param identify="high quality" worth="finest" />
<param identify="bgcolor" worth="#FFFFFF" />
<param identify="scale" worth="noScale" />
<param identify="salign" worth="TL" />
<param identify="FlashVars" worth="playerMode=embedded" />
</object>
My actual peeve, nevertheless, as I discussed above, isn’t with Flash films—which I’ve little expertise with—however with QuickTime and Home windows Media Participant films. I’ve been attempting to embed these in a regular approach for years, however with out a lot luck. Fairly just lately, I came across the MIME sort that can allow you to use a single object for Home windows Media Participant information (.wmv). I nonetheless can’t fairly consider it.
Eureka! One object for Home windows Media Participant#section3
I’m a agency believer in taking note of errors. It’s solely after I discover that I’ve accomplished one thing mistaken, and determine why, that I’m able to determine new methods of doing issues proper. As I used to be reviewing the approach, I observed that though it did work effectively for QuickTime films (as described beneath), it didn’t work for Home windows Media Participant films…on Opera…for Home windows. I suppressed the urge to disregard it, and as I dug for a solution to that drawback, I got here throughout the MIME sort that can allow you to use a single object to embed Home windows Media Participant information: video/x-ms-wmv.
To embed a Home windows Media Participant file, you must be capable of use this code (Line wraps marked » —Ed.):
<object sort="video/x-ms-wmv" knowledge="http://www.sarahsnotecards.com/catalunyalive/ » fishstore.wmv" width="320" peak="260"> <param identify="autostart" worth="true" /> <param identify="controller" worth="true" /> </object>
Nevertheless it seems that IE6 and IE7 and Safari (unusual bedfellows if ever there have been), all want a little bit further push, within the type of an additional param factor:
<object sort="video/x-ms-wmv"
knowledge="http://www.sarahsnotecards.com/catalunyalive/ »
fishstore.wmv"
width="320" peak="260">
<param identify="src"
worth="http://www.sarahsnotecards.com/catalunyalive/ »
fishstore.wmv" />
<param identify="autostart" worth="true" />
<param identify="controller" worth="true" />
</object>
And it really works.
Personally, I take into account this gorgeous experimental, or on the very least sacrilegious… embedding a Home windows Media Participant film with out a classid! (What’s subsequent? Legitimate paperwork with no DOCTYPE?) I examined this straightforward instance in IE5.5, IE6, IE7, Opera Win/Mac, Firefox Win/Mac, and Safari and it labored simply advantageous. That mentioned, I don’t do quite a lot of scripting or Microsoft stuff, so your mileage might fluctuate. (Observe: After all, there are various extra param parts that you could be want to use.)
Embedding QuickTime films with out embed#section4
Sadly, I’m nonetheless fairly certain there’s no sort that will persuade IE to open a QuickTime film with out an ActiveX management. The plain selections, sort="video/quicktime" and even sort="utility/x-quicktime", solely work on standards-loving browsers. So I went a distinct route.
Some fundamental premises#section5
This system is predicated on a few premises:
- First, the
objectfactor is designed to be nested with a purpose to assist browsers degrade gracefully. If a browser can’t show the outermostobject, it ought to strive the subsequent one after which the subsequent one till it finds one it could deal with. As soon as it does discover anobjectit could take care of, it’s presupposed to ignore the remainder. - Second, most main browsers totally assist the
objectfactor. The massive exception is (shock) Web Explorer. IE6 shows allobjectparts it could take care of—even when they’re nested—in addition to slightly ugly, ghostly apparitions of those it could’t. Fortunately, IE7 doesn’t do the ghosts, nevertheless it sadly doesn’t favor the nested objects if there’s an issue with the outer object. It simply provides you an error. - Third, Web Explorer (as much as and together with model 7) implements the
objectfactor in a non-standard approach that makes different browsers ignore it.
I believe the reply could be present in IE’s system of conditional feedback. I began listening to about it when of us had been attempting to resolve learn how to take care of IE7’s new approximation to CSS. And whereas IE’s commenting is peculiar to IE (learn: proprietary), so is its failure to correctly use the object factor. It’s an ideal match.
Embedding QuickTime for Web Explorer#section6
I’m going to make use of QuickTime for my instance, however you need to use the identical approach with Home windows Media Participant films with the classid attribute, as I’ll present you a bit farther alongside.
To insert a fundamental QuickTime film in Web Explorer, we’ll use one thing like this (Line wraps marked » —Ed.):
<object classid="clsid:02BF25D5-8C17-4B23-BC80 »
-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" peak="256">
<param identify="src"
worth="http://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" />
<param identify="controller" worth="true" />
<param identify="autoplay" worth="false" />
</object>
Don’t overlook the peak or the width or that horrendous classid which calls the QuickTime ActiveX management. Observe that the param factor that specifies the URI of the film has a identify attribute of “src,” not “url” or “film.”
You’ll be able to preview the impact right here. In IE, you’ll see a film, in different browsers you gained’t see a factor.
Embedding QuickTime films for everybody else#section7
Though standards-loving browsers can’t take care of that object because the classid attribute is that terrible quantity as an alternative of a URL, they will maintain seeking to see if there’s any nested objects they will take care of.
So, simply earlier than the closing </object> tag, we’ll use a commonplace implementation of the object factor (Line wraps marked » —Ed.):
<object classid="clsid:02BF25D5-8C17-4B23-BC80- »
D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" peak="256">
<param identify="src"
worth="http://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" />
<param identify="controller" worth="true" />
<param identify="autoplay" worth="false" />
<object sort="video/quicktime"
knowledge="http://www.sarahsnotecards.com/catalunyalive/ »
diables.mov"
width="320" peak="256">
<param identify="autoplay" worth="false" />
<param identify="controller" worth="true" />
</object>
</object>
The width and peak are required, as is the sort.
In case you view this mixture in a standards-loving browser, it appears nice, if a bit loud. IE 6 (and earlier), as we talked about earlier than, can’t fairly resolve what to do with the second object and mainly botches it with a ghostly apparition.
What IE can’t see, it could’t mess up#section8
Though IE’s conditional feedback had been designed for use for the slightly questionable objective of serving it particular code that’s hidden from different browsers, we’ll use them right here to cover code from IE however not from different browsers. (It’s a little bit of a slap within the face—although not likely that shocking—that Microsoft has the nerve to refer to those different browsers as “downlevel”.)
Feedback written with Microsoft’s “authentic syntax” don’t validate (shock) however fortunately, Lachlan Hunt discovered a option to regulate them in order that they do.
So we have to conceal the second object from IE with its personal commenting system. Insert <!--[if !IE]>--> in entrance of the second <object> tag and <!--<![endif]--> proper after the primary closing </object> tag. (Line wraps marked » —Ed.)
<object classid="clsid:02BF25D5-8C17-4B23-BC80- »
D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" peak="260">
<param identify="src"
worth="http://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" />
<param identify="controller" worth="true" />
<param identify="autoplay" worth="false" />
<!--[if !IE]>-->
<object sort="video/quicktime"
knowledge="http://www.sarahsnotecards.com/catalunyalive/ »
diables.mov"
width="320" peak="260">
<param identify="autoplay" worth="false" />
<param identify="controller" worth="true" />
</object>
<!--<![endif]-->
</object>
Now it’s stunning!
What’s extra you need to use the entire assortment of parameters with the object factor as described on Apple’s Builders web site.
Subsequent time, I’ll take a look at with a barely much less raucous film.
The main points for Home windows Media Participant#section9
In case you’d slightly embed Home windows Media Participant information with the classid and never within the one-object technique I exhibit close to the start of this text, the code is just barely completely different. For the classid within the preliminary object tag, use classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6". To specify the URL of your Home windows Media Participant film, use a param factor with a identify attribute equal to “url” for many browsers after which repeat the worth utilizing a identify attribute equal to “src” for Safari.
Then within the second, standards-compliant implementation of the object, use the identical code as within the one-object technique.
Right here’s an instance (Line wraps marked » —Ed.):
<object classid="CLSID:6BF52A52-394A-11d3-B153- »
00C04F79FAA6"
id="participant" width="320" peak="260">
<param identify="url"
worth="http://www.sarahsnotecards.com/catalunyalive »
/fishstore.wmv" />
<param identify="src"
worth="http://www.sarahsnotecards.com/catalunyalive »
/fishstore.wmv" />
<param identify="showcontrols" worth="true" />
<param identify="autostart" worth="true" />
<!--[if !IE]>-->
<object sort="video/x-ms-wmv"
knowledge="http://www.sarahsnotecards.com/catalunyalive »
/fishstore.wmv"
width="320" peak="260">
<param identify="src"
worth="http://www.sarahsnotecards.com/ »
catalunyalive/fishstore.wmv" />
<param identify="autostart" worth="true" />
<param identify="controller" worth="true" />
</object>
<!--<![endif]-->
</object>
A small wrinkle, or, what’s left to do#section10
As of January 2006, Apple began selling using JavaScript to name films for net pages in order that customers wouldn’t must click on on ActiveX controls with a purpose to activate them. It’s a protracted, convoluted story that started with a lawsuit in opposition to Microsoft and ended up making life tough for the remainder of us. At any price, the strategies described above work virtually completely with none JavaScript in any respect, with one caveat: QuickTime films gained’t autoplay in IE. I’m undecided I’d even need the instance video to autoplay! Nonetheless, I discover it extremely suspicious that Home windows Media Participant information load within the background and autoplay with none interplay whereas QuickTime films present simply the preliminary body whereas the audio performs, however no shifting photos are proven.
At any price, I wish to see how the activating ActiveX controls subject performs out earlier than I implement what I take into account a slightly laborious JavaScript resolution to my complete web site. I exploit little or no JavaScript and wish to maintain it that approach.
Whether or not you go the JavaScript route or not is definitely irrelevant to the article at hand. Both approach, you may nonetheless eschew the embed tag for the usual object factor.
I’d have favored to determine a option to conceal the inside objects solely from IE 6 and earlier, since IE 7 (at the least in beta 2) appears to be dealing with nested object parts correctly, however I used to be unsuccessful. Whereas there’s a conditional remark that will permit such a factor (<!--[if gte IE 7]>-->), the additional characters (-->) that Lachlan supplied to make the factor validate are seen with IE7 (as they need to be logically). Any concepts?
On the shoulders of giants#section11
Different individuals have additionally labored on this drawback. This text agreed that two nested object parts ought to work however relied on what I take into account slightly sophisticated CSS to cover the second object.
Ian Hickson used the IE feedback to cover a second object from IE that had Flash content material.
And the aforementioned Lachlan Hunt discovered learn how to write legitimate Web Explorer conditional feedback that conceal content material from IE whereas revealing it to different browsers.