HTML-Advisor
Mostly practical advices

XHTML compatible markup for embeding FLASH and Video

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 a 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.
<object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=033658" width="400" height="326" id="VideoPlayback">
<param name="movie" value="http://video.google.com/googleplayer.swf?docId=033658" />
<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:
<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 outermost object, it should try the next one and then the next one until it finds one it can handle. Once it does find an object 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 all object 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:
<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.”

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:
<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.
<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 is an example:
<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.

Source: www.alistapart.com

Tags: , , , , , , , , ,

Related:

Posted in FLASH, XHTML. 2,925 views
Responses are currently closed, but you can trackback from your own site.

2 Comments

Sorry, the comment form is closed at this time.