原文网址:http://www.alistapart.com/articles/byebyeembed/
最近学了点小学英文,懒得翻译了,见谅。
It has always gotten my goat that Internet Explorer’s non-standard use of the object
tag has forced standards-loving browsers to use the non-standard embed
tag in order to embed movies on a web page. Even on Apple’s site, the embed
tag—a Netscape extension, for Pete’s sake!—is so entrenched that it’s hard to even find information about using the object
element for QuickTime, except in a non-standard way.
The use of embed
has gone on too long. Wishing for it to become part of the official specs is like wishing your partner would start putting the cap on the toothpaste. It’s not going to happen. It’s time to move on. If you want to validate your website, you have to get rid of embed
. In this article, I’ll show you how.
Online Movies: Google Video and YouTube
ALA readers will remember Drew McLellan’s seminal article on Flash Satay. In that article, Drew described a method for inserting Flash animations on a page without using the embed
element. Flash Satay has two parts. First, Drew figured out that you can use a single object
element to call Flash as long as you specify its type
adequately. Second, to properly stream Flash movies, you have to embed a sort of reference movie.
I’ve been experimenting with Drew’s code on Google Video and YouTube content. I was shocked to find that Google Video suggests you use only the embed
tag to embed their video on Web pages. Alas, not shocked that they would suggest such a thing—just shocked that it actually works on Internet Explorer, which stopped supporting the non-standard, but universally-supported embed
tag years ago in favor of its proprietary implementation of the standard object
tag that renders that tag completely invisible to standards-loving browsers. It turns out that IE supports embed
as long as the visitor has the appropriate player already installed. If not, they get an error and a generic broken-plugin icon, but no help. YouTube, for its part, does the often seen but hardly standard twice cooked approach, offering both the object
and embed
tags.
Since both Google Video and YouTube serve movies through the Flash player—regardless of your movie’s format when you uploaded it—you can use Drew’s single object
method to embed such movies on your page. Indeed, you don’t have to use the Satay part of his code; movies on Google Video and YouTube stream even without the reference movie he suggests. (Line wraps marked » —Ed.)
<object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf? » 8755581808731033658" width="400" height="326" id="VideoPlayback"> <param name="movie" value="http://video.google.com/googleplayer.swf? » docId=8755581808731033658" /> <param name="allowScriptAcess" value="sameDomain" /> <param name="quality" value="best" /> <param name="bgcolor" value="#FFFFFF" /> <param name="scale" value="noScale" /> <param name="salign" value="TL" /> <param name="FlashVars" value="playerMode=embedded" /> </object>
My real peeve, however, as I mentioned above, isn’t with Flash movies—which I have little experience with—but with QuickTime and Windows Media Player movies. I’ve been trying to embed these in a standard way for years, but without much luck. Quite recently, I came upon the MIME type that will let you use a single object
for Windows Media Player files (.wmv). I still can’t quite believe it.
Eureka! One object
for Windows Media Player
I am a firm believer in paying attention to mistakes. It’s only when I notice that I’ve done something wrong, and figure out why, that I am able to figure out new ways of doing things right. As I was reviewing the technique, I noticed that although it did work well for QuickTime movies (as described below), it didn’t work for Windows Media Player movies…on Opera…for Windows. I suppressed the urge to ignore it, and as I dug for an answer to that problem, I came across the MIME type that will let you use a single object
to embed Windows Media Player files: video/x-ms-wmv
.
To embed a Windows Media Player file, you should be able to use this code (Line wraps marked » —Ed.):
<object type="video/x-ms-wmv" data="http://www.sarahsnotecards.com/catalunyalive/ » fishstore.wmv" width="320" height="260"> <param name="autostart" value="true" /> <param name="controller" value="true" /> </object>
But it turns out that IE6 and IE7 and Safari (strange bedfellows if ever there were), all need a little extra push, in the form of an extra param
element:
<object type="video/x-ms-wmv" data="http://www.sarahsnotecards.com/catalunyalive/ » fishstore.wmv" width="320" height="260"> <param name="src" value="http://www.sarahsnotecards.com/catalunyalive/ » fishstore.wmv" /> <param name="autostart" value="true" /> <param name="controller" value="true" /> </object>
And it works.
Personally, I consider this pretty experimental, or at the very least sacrilegious… embedding a Windows Media Player movie without a classid
! (What’s next? Valid documents with no DOCTYPE
?) I tested this simple example in IE5.5, IE6, IE7, Opera Win/Mac, Firefox Win/Mac, and Safari and it worked just fine. That said, I don’t do a lot of scripting or Microsoft stuff, so your mileage may vary. (Note: Of course, there are many more param
elements that you may wish to use.)
Embedding QuickTime movies without embed
Unfortunately, I’m still pretty sure there’s no type
that would convince IE to open a QuickTime movie without an ActiveX control. The obvious choices, type="video/quicktime"
or even type="application/x-quicktime"
, only work on standards-loving browsers. So I went a different route.
Some basic premises
This technique is based on a couple of premises:
- First, the
object
element is designed to be nested in order to help browsers degrade gracefully. If a browser can’t display the outermostobject
, it should try the next one and then the next one until it finds one it can handle. Once it does find anobject
it can deal with, it is supposed to ignore the rest. - Second, most major browsers fully support the
object
element. The big exception is (surprise) Internet Explorer. IE6 displays allobject
elements it can deal with—even if they’re nested—as well as rather ugly, ghostly apparitions of the ones it can’t. Thankfully, IE7 doesn’t do the ghosts, but it unfortunately doesn’t favor the nested objects if there’s a problem with the outer object. It just gives you an error. - Third, Internet Explorer (up to and including version 7) implements the
object
element in a non-standard way that makes other browsers ignore it.
I think the answer can be found in IE’s system of conditional comments. I started hearing about it when folks were trying to decide how to deal with IE7’s new approximation to CSS. And while IE’s commenting is peculiar to IE (read: proprietary), so is its failure to properly use the object
element. It’s a perfect match.
Embedding QuickTime for Internet Explorer
I’m going to use QuickTime for my example, but you can use the same technique with Windows Media Player movies with the classid
attribute, as I’ll show you a bit farther along.
To insert a basic QuickTime movie in Internet Explorer, we’ll use something like this (Line wraps marked » —Ed.):
<object classid="clsid:02BF25D5-8C17-4B23-BC80 » -D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256"> <param name="src" value="http://www.sarahsnotecards.com/catalunyalive/ » diables.mov" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> </object>
Don’t forget the height
or the width
or that horrendous classid
which calls the QuickTime ActiveX control. Note that the param
element that specifies the URI of the movie has a name
attribute of “src,” not “url” or “movie.”
You can preview the effect here. In IE, you’ll see a movie, in other browsers you won’t see a thing.
Embedding QuickTime movies for everyone else
Although standards-loving browsers can’t deal with that object
since the classid
attribute is that awful number instead of a URL, they will keep looking to see if there’s any nested objects they can deal with.
So, just before the closing </object>
tag, we’ll use a standard implementation of the object
element (Line wraps marked » —Ed.):
<object classid="clsid:02BF25D5-8C17-4B23-BC80- » D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256"> <param name="src" value="http://www.sarahsnotecards.com/catalunyalive/ » diables.mov" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <object type="video/quicktime" data="http://www.sarahsnotecards.com/catalunyalive/ » diables.mov" width="320" height="256"> <param name="autoplay" value="false" /> <param name="controller" value="true" /> </object> </object>
The width
and height
are required, as is the type
.
If you view this combination in a standards-loving browser, it looks great, if a bit loud. IE 6 (and earlier), as we mentioned before, can’t quite decide what to do with the second object
and basically botches it with a ghostly apparition.
What IE can’t see, it can’t mess up
Although IE’s conditional comments were designed to be used for the rather questionable purpose of serving it special code that is hidden from other browsers, we’ll use them here to hide code from IE but not from other browsers. (It’s a bit of a slap in the face—though not really that surprising—that Microsoft has the nerve to refer to these other browsers as “downlevel”.)
Comments written with Microsoft’s “original syntax” don’t validate (surprise) but thankfully, Lachlan Hunt figured out a way to adjust them so that they do.
So we need to hide the second object
from IE with its own commenting system. Insert <!--[if !IE]>-->
in front of the second <object>
tag and <!--<![endif]-->
right after the first 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" height="260"> <param name="src" value="http://www.sarahsnotecards.com/catalunyalive/ » diables.mov" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <!--[if !IE]>--> <object type="video/quicktime" data="http://www.sarahsnotecards.com/catalunyalive/ » diables.mov" width="320" height="260"> <param name="autoplay" value="false" /> <param name="controller" value="true" /> </object> <!--<![endif]--> </object>
Now it’s beautiful!
What’s more you can use the whole collection of parameters with the object
element as described on Apple’s Developers site.
Next time, I’ll test with a slightly less raucous movie.
The details for Windows Media Player
If you’d rather embed Windows Media Player files with the classid
and not in the one-object
method I demonstrate near the beginning of this article, the code is only slightly different. For the classid
in the initial object
tag, use classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
. To specify the URL of your Windows Media Player movie, use a param
element with a name
attribute equal to “url” for most browsers and then repeat the value
using a name
attribute equal to “src” for Safari.
Then in the second, standards-compliant implementation of the object
, use the same code as in the one-object
method.
Here’s an example (Line wraps marked » —Ed.):
<object classid="CLSID:6BF52A52-394A-11d3-B153- » 00C04F79FAA6" id="player" width="320" height="260"> <param name="url" value="http://www.sarahsnotecards.com/catalunyalive » /fishstore.wmv" /> <param name="src" value="http://www.sarahsnotecards.com/catalunyalive » /fishstore.wmv" /> <param name="showcontrols" value="true" /> <param name="autostart" value="true" /> <!--[if !IE]>--> <object type="video/x-ms-wmv" data="http://www.sarahsnotecards.com/catalunyalive » /fishstore.wmv" width="320" height="260"> <param name="src" value="http://www.sarahsnotecards.com/ » catalunyalive/fishstore.wmv" /> <param name="autostart" value="true" /> <param name="controller" value="true" /> </object> <!--<![endif]--> </object>
A small wrinkle, or, what’s left to do
As of January 2006, Apple started promoting the use of JavaScript to call movies for web pages so that users wouldn’t have to click on ActiveX controls in order to activate them. It’s a long, convoluted story that began with a lawsuit against Microsoft and ended up making life difficult for the rest of us. At any rate, the methods described above work almost perfectly without any JavaScript at all, with one caveat: QuickTime movies won’t autoplay in IE. I’m not sure I’d even want the example video to autoplay! Nevertheless, I find it highly suspicious that Windows Media Player files load in the background and autoplay without any interaction while QuickTime movies show just the initial frame while the audio plays, but no moving pictures are shown.
At any rate, I want to see how the activating ActiveX controls issue plays out before I implement what I consider a rather laborious JavaScript solution to my whole site. I use very little JavaScript and like to keep it that way.
Whether you go the JavaScript route or not is actually irrelevant to the article at hand. Either way, you can still eschew the embed
tag for the standard object
element.
I would have liked to figure out a way to hide the inner objects only from IE 6 and earlier, since IE 7 (at least in beta 2) seems to be handling nested object
elements properly, but I was unsuccessful. While there is a conditional comment that would allow such a thing (<!--[if gte IE 7]>-->
), the extra characters (-->
) that Lachlan offered to make the thing validate are visible with IE7 (as they should be logically). Any ideas?
On the shoulders of giants
Other people have also worked on this problem. This article agreed that two nested object
elements should work but relied on what I consider rather complicated CSS to hide the second object.
Ian Hickson used the IE comments to hide a second object
from IE that had Flash content.
And the aforementioned Lachlan Hunt figured out how to write valid Internet Explorer conditional comments that hide content from IE while revealing it to other browsers.