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#section2
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#section3
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#section4
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#section5
This technique is based on a couple of premises:
- First, the
objectelement 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 anobjectit can deal with, it is supposed to ignore the rest. - Second, most major browsers fully support the
objectelement. The big exception is (surprise) Internet Explorer. IE6 displays allobjectelements 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
objectelement 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#section6
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#section7
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#section8
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#section9
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#section10
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#section11
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.
The embedded “Quicktime for IE-only trick”:/d/byebyeembed/justforie.html supposedly shows nothing in non-IE browsers. This is not entirely correct since it *does work* in Opera 7.54, Safari 2.0.3 and OmniWeb 5.1.1 (on Mac OS 10.4.6). Funny thing is that IE 5.2 (Mac) does _not_ work.
The “full solution”:/d/byebyeembed/forall.html indeed works as advertised, even in IE5.2-Mac.
Great article btw — thanks.
Very useful article, thanks. I’m implementing this into my website now. It’s worth noting that the control toolbar for Windows Media Player is included in the ‘height’ variable (intensely irritating as it may be). For IE6 and Firefox 1.5 on Windows XP this is an extra 45 pixels, but I don’t know if this is the same across all browsers and operating systems.
Funnily enough, my windows server refuses to render the code. It gives an ASP error, which seems strange as it has no business examining HTML!
bq. Active Server Pages, ASP 0139 (0x80004005) An object tag cannot be placed inside another object tag.
Why can’t we focus on getting the ubiquitous tag incorporated into the XHTML specification? Look how simple and elegant this is:
Thanks for this useful article from one of the Web’s most important women writers.
Check out “www.HappinessU.org”:http://www.happinessu.org
They take a rather simple approach to this entire problem that not only makes sense, but requires a heck of a lot less code than any of the other workarounds I’ve seen out there.
If you’re not a real programmer and just want to fix this, they even have a little tool for the commoner that lets you drop your old embed code in and it creates all the code you need.
To JavaScript, or not to JavaScript. For me, there are no alternative options but to always use JavaScript when embedding rich media content.
As we all know, the latest versions of IE 6 (with the recent security update) and IE 7 beta permanently changed the behavior of assets embedded using ActiveX. This is especially detrimental to Flash, where users must click an annoying dialog box button to activate the movie before it can load/playback. While this is (for now) and IE only issue, it may as well affect all browsers because of IE’s ubiquity.
With that, the easiest way to get around IE is to embed your Flash movies using JavaScript, with SWFObject (http://blog.deconcept.com/swfobject/) the best one out there (IMO). It requires only a few lines of code, provides Flash Player version detection, and allows you to easily offer alternate content to those without the Flash Player (or JavaScript enabled for that matter).
You can simply use a series of document.write calls to do the same thing, and avoid the page weight hit of embedding a medium sized external JS file, if page weight is a concern. But that’s prone to human error, and can be a real pain in the arse to maintain.
My points are mostly related to the complexities of embedding Flash content and not necessarily QT or Windows, but after years of tinkering with alternate ways for embedding Flash content and detecting player versions I’ve yet to find a better solution than using JavaScript.
Amazing! I spent several hours today trying to bust this nut. I almost gave up in the end. Then “ta-da”, out of the blue (without searching) the answer turns up.
Many thanks! – Loved the crackers.
I added this article to my page that documents every known method of using embed and object with valid code:
“Standards-compliant Web pages with captioning”:http://joeclark.org/access/captioning/bpoc/embed-object.html#ALA-July2006
Man, this Textile syntax is weird.
autostart=”false” only works in IE, if you use 0’s and 1’s for the boolean switches it works in Firefox, and IE have not tested others.
We had a lot of problems lately with video and the latest install of Firefox (1.5.04). We were using the embed tag to display our video files and it only worked on about half of the desktops with the latest firefox install. After hunting high and low this was the fix that solved the issue. Very timely info, thanks for the fix.
It appears that the ‘show to non-ie’ type of conditional comments were included in Hixies flash example from 2004, Lachlan’s example used a different method.
In fact, if you combine them, you could use two blocks, one for IE 5-6, and one for IE 7 & standards based browsers “like so”:http://alastairc.ac/code/ie_cc_test.html
I’m not sure what the benefit of nesting the objects is? You are effectively showing different HTML to different browsers anyway?
for MSJVM people have to use APPLET, otherwise see: embeding “java”:http://ww2.cs.fsu.edu/~steele/XHTML/appletObject.html via conditional comments.
also: nice js plugin “framework”:http://www.knallgrau.at/code/plugin_js
I think the answer is not to get the embed tag added to any HTML specs, but to encourage browser makers to fix the way their browser handles the object tag. (maybe we need a browser plug-in task force?)
Until that happens (and possibly after because of things like the Eolas issue), Javascript is and will be the best way to embed any content that uses a plugin.
Unfortunately, the _Eureka! One object for Windows Media Player_ example did not work for me on Safari 2.0.4. Better head back to the drawing board.
elizabeth, this article made my month! man, i’ve been scouring the net for this answer for months now. my ad school friends entered a contest recently and asked me to embed their current.tv flash video on my blog to help get them some votes … and i reluctantly agreed knowing that it would totally ruin my perfectly valid code that i worked so hard to maintain. but your tips helped fix all my issues and now i can go back to being OCD. so thanks!
I had noticed the Safari/Firefox conflict myself in object param markup and mounted my own examples a few months ago <http://www.q7design.demon.co.uk/QTMovieMarkup/> before submitting a report to webkit. As both markups validate with the W3C validator it is not clear to me which style of object markup is correct, as I find the W3C spec. completely incomprehensible. Anyone out there understand it?
Few months ago I published similar way how correctly insert a Flash into XHTML (see http://www.dgx.cz/trine/item/how-to-correctly-insert-a-flash-into-xhtml). This method doesn’t require to insert any twice!
I have found out the same trick with conditional comments as Lachlan Hunt figured out, syntax-highlighed explanation is here http://www.dgx.cz/trine/item/the-magic-with-conditional-comments.
Sorry – now with clickable links:
– “how insert
The parameter for src and controller used in the example are from WMP6.4 rather than WMP7 and later :
From WMP version 7 there was a compatibility layer put into the player to allow these elements temporarily, but it’s not guaranteed to work forever.
The src one is easy to change, it should be name=”url” instead of name=”src”. The param element for controller no longer exists, it’s replaced by uimode : One of
See these MSDN articles for complete details :
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/playeruimode.asp
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/paramtags.asp
A detailed object comparison between WMP6.4 and WMP 7 and later
http://windowssdk.msdn.microsoft.com/en-us/library/ms740077.aspx
Cheers – Neil Smith
MVP Digital Media
Wow, two ALA articles that correspond exactly to some problems I’ve been having a while ago!
I’ve done some research on this subject myself once, but I didn’t find a standards compliant solution. Thanks a lot for providing one!
If you’re looking to use QuickTime objects, I found a simple solution that uses no JavaScript or nested objects.
Elizabeth pointed out that classid is the piece of code that gives Web standards do-gooders such headaches. So, why not a little server-side if/else statement to show it to browsers that need it?
If the browser is IE, show an opening object tag that includes the classid.
Else, show an opening object tag without it.
<!–#if expr=”${HTTP_USER_AGENT} = /MSIE/” –>
<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B” type=”video/quicktime” width=”400″ height=”300″ data=”videofile.mpg” standby=”Loading MPEG video…”>
<!–#else –>
<object type=”video/quicktime” width=”400″ height=”300″ data=”videofile.mpg” standby=”Loading MPEG video…”>
<!–#endif –>
<param name=”src” value=”videofile.mpg” />
<param name=”autoplay” value=”true” />
<param name=”controller” value=”true” />
<param name=”scale” value=”tofit” />
</object>
Works in IE Windows, Firefox Windows/Mac, Safari, and kind of works on IE Mac.
This is great. I’m wondering if we can modify it so that it doesn’t use the IE conditional in the HTML. Try adding a class (“outterObject” in this example) to the parent object, and this to the global CSS file:
object { height: 0; width: 0; }
object.outterObj, object object { display: block; height: 200px; width: 320px; }
Unfortunately, IE doesn’t seem to see the nested object tag as nested, otherwise you wouldn’t need to set the default height and width values to 0 for object tags.
This of course means that you have to remove the height and width from inline on the object to the style sheet, which is a good thing, since it’s a display property anyway (and it will enable you to modify it for other media types).
I’ve only tested this for Firefox and IE6 on the PC, so I’d love to hear any feedback.
A possible word of caution here: From my experience with the Flash Satay method to embed Flash movies into pages, using the
In my own personal projects and in design work that I do for my clients, I tend to try to use Flash Satay as much as possible, but only when the Flash content is inconsequential to the main “meat” of the page, and is just acting as visual “icing on the cake.” When my clients demand heavy Flash content, I still have to resort to the twice-cooked method for any kind of streaming to occur. (Preloaders don’t seem to be able to counteract this effect, either.) Anyone else have any experience with regard to this?
Elizabeth asked about a variant form of the conditional comment technique which would select for non-IE/Win or certain IE/Win versions.
This should be the answer. Based on work by André Huf, Roger Johansson, Lachlan Hunt). (See “André Huf’s comment”:urlhttp://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/ at the foot of Roger Johansson’s article.)
Try this test example:
—
Test – valid form, Huf/Johansson: (note: IE6, IE5 should show nothing, all other browsers should show a result)
I am
either a non-IE/Win browser, or IE/Win >6, or ancient.
—
The test for IE versions can of course be reversed by changing the conditional test from gt to lt.
Note that this technique will fail for ancient IE/Win browsers <=IE4/Win. Cecil Ward.
Alistapart rather chewed up that last example. The close-conditional comment above should have read
< ! - -
That is, a straightforward comment with an IE-conditional-close marker embedded within it.
And that too. At this point, I give up. I am indeed an idiot. And I am now going to go off and do something else instead like get some coffee, take the dogs out for a walk and feed the hens and ducks.
That commenting works great. In particular, one could use:
as the new initial comment just before the nested object. This limits the comments’ effect to only IE 5, 5.5, and 6 (assuming it fails in IE4, I did not test it 🙂 and lets IE7 work properly on its own (ignoring the second object element that it does not understand).
This article got me playing with Flash again, and I noticed an oddity in Firefox; the browser appears to rely on page stying to display Flash movies when only the object tag is used.
If you exclude the width and height attributes from the object tag, the movie won’t appear at all (I guess it can’t read the movie’s intrinsic values). But, even when you do set the width and height, if you turn styles off (View > Page Style > No Style), the movie will vanish.
The embed tag doesn’t suffer from this quirk, not that I’m condoning its use–but I don’t see a workaround.
Just as an addendum, I’m also using the IE conditional commenting to send a unique object tag to IE and a generic tag to other browsers. I’m not nesting my object tags though, it’s literally:
I’m not worried about the minor code repetition, and because the offending IE object tag is entirely commented out, the page validates.
Sorry to triple post, but it ate the second line of my example, which was:
->
In my earlier post, I mentioned “the Huf/Johansson technique”:url:http://www.alistapart.com/comments/byebyeembed?page=3#25 for IE-Win v.x selective exclusion using valid IE-conditional directives.
I’ve done some testing using “BrowserCam”:url:http://www.browsercam.com and the technique seems _very reliable_. I use this technique for CSS filtering (but with additional IE/Mac filtering on top), and it’s fantastic. For the benefit of anyone who wants to use know whether they can safely take advantage of this, here’s the browsercam blitz in full.
* Tested and *passed* in: IE5.0/Win, IE 6, IE 7 beta3; Netscape 6.2.3, Netscape 7.2; Konqueror 3.4; IE/Mac 5.2.x; Safari 1.2, Safari 2.0; Camino 1.0; Opera 9.0; Mozilla 1.6; Mozilla 1.7.12; Firefox 1.5
* Tested in: Netscape 4.78; IE/Win 4.0 – ‘correct’ behaviour as per spec, ie filter not effective
* Test *omissions*; IE/Win 3; IE/Win 5.5; IE/Mac 5.1.x; IE/Mac<=4.x; Opera<=8.x
So feel free to go for it, provided you watch out for ancient v4 browsers. See also “Roger Johansson’s article”:url:http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/ and go down to “André Huf’s comment”:url:http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/#comment21 .
As I’m currently developing an online video portal for my company, this article has been quite pertinent. Great job.
Great article and method. However, as all my pages are XHTML Strict, this won’t validate with W3C. Also, it angers some Web Content Accessibility Guidelines.
This worked great for me. Our CIO had me use an .asx file with a redirect in it instead of linking directly to our streaming server. Why is that?
I know that within an XHTML document it is proper to type tags in lowercase but I believe that when referring to a tag (or attribute) within an article it is perfectly fine to render them in all caps. Thus . . .
“The use of embed has gone on too long.”
would be perfectly valid as
“The use of EMBED has gone on too long.”
It really helps readability for me when I am reading an article such as this. Looking forward to the sixth edition of your book, Elizabeth. Actually checked Barnes and Noble for it yesterday.
We are developing a filter to allow members to more easily publish youtube and other videos into our global social network. Without altering and breaking the rest of the site layout of course. This article helps considerably! Our core platform is Drupal and we plan to publish back the results once completed.
Note: “autostart” isn’t part of the QuickTime plug-in attributes, you should rather use the autoplay parameter with value true or false.
Very useful. Mnay thanks.
Michael Locker MD
through trial and error, i came up with the quicktime version ages ago for my day job’s virtual tours section http://www.salford.ac.uk/about/virtual_tour/
Great article but the whole object-in-an-object markup concept is just plain bad to me, and smells of the ol’ embed solution of olden days. Ive got a much simpler solution that works cross-browser and is xhtml compliant. Mine uses two object tag sets and display:none to hide one set based on the browser. One for IE active x and the other for all the others. Some special fixes as well, but uses simple CSS to show and hide each type for each browser. Works on MAC as well (IE and Safari), and works with Flash, Quicktime and any multimedia object you may have. Can even be used as a replacfement for the old iframe. Check it out when you get a chance and send comments:
http://www.stormdetector.com/hacks/flash_example.html
– thestormdetector
I recently Goggled a problem I was having with the way my WMV files were opening on my site.
I found this site”¦
Ree: One object for Windows Media Player
I just used his code and IMO it works GREAT!!
“GREAT!!”? being it opens the WMV’s the way I envisioned them opening!!
http://members.shaw.ca/heis/content/content1.html
The following properties are supported for use with the name attribute of the PARAM element. “Param tags”:http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/paramtags.asp All these work with IE and Media Player ActiveX plugin (the object with classid). Don’t use old deprecated Media Player 6.4 properties with Active-X plugin.
In Parentheses is specified what you should use with NPAPI-plugin ie. in second object or embed for Firefox, Opera, Safari etc.
Note also that according to specs autoStart is true by default so it is not necessary to specify it.
* autoStart (OK, use 0 or 1 instead of false and true(default))
* balance —
* baseURL —
* captioningID — (Mozilla bug 293616)
* currentPosition (Only works with local files or if the file is cached)
* currentMarker (OK)
* defaultFrame (OK)
* enableContextMenu (OK, use 0 or 1 instead of false and true(default))
* enabled (OK, use 0 or 1 instead of false and true(default))
* fullScreen —
* invokeURLs (OK, use 0 or 1 instead of false and true(default))
* mute (OK, use 0 or 1 instead of false(default) and true)
* playCount (OK)
* rate (OK)
* SAMIFileName (OK)
* SAMILang ?
* SAMIStyle ?
* stretchToFit —
* uiMode — (none = set ShowControls to 0), (mini = set ShowPositionControls to 0), (full(default) set ShowStatusBar to 1)
* URL — (Use fileName)
* volume —
* windowlessVideo —
— = Not supported in browsers(Firefox, Opera, Safari etc.) which use “NPAPI”:http://en.wikipedia.org/wiki/NPAPI -plugin . Also JavaScripting doesn’t work with NPAPI-plugin (blaim Microsoft).
It is good practise to provide additional download link.
Check that your server actually serves correct MIME-types. “MIME Type Settings for Windows Media Services”:http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwmt/html/mime.asp
I have used the object tag to inlcude a Flash video (.FLV) and it seems to work well. Maybe Flash video is the way to go – more people have the plug-in and progressive download means the entire file doesn’t have to be downloaded at once.
If you are using QT you need to provide alternatives which could be confusing for the user. I am not sure whether Flash video will be more accessible though – it will need more testing.
Steven
The version that is supposed to work (http://alistapart.com/d/byebyeembed/forall.html) shows a completely blank page in my Safari 2.0.4.
Strange. Both test versions wouldn’t stream in FF (on winXP) until they fully loaded, then they played fine.
But the final for standards loving browsers version actually crashed my FF; this is the very first time that my FF has crashed.
I don’t want to know why the it crashed my FF. It did. Period. I lost all my open tabs (including a lengthy, unposted, reply to someone on why their page was blowing up (because among other reasons, they had used thetag!). If the solution here crashed on me, it may crash on one of my visitors … I can’t take the risk of lost respect or patronage.
There has been a problem with replacing the damntag with a valid “cross-browser-perform-as-intended”
As a standards compliant web coder, I often wonder why I bother fighting with tableless css layout to make them cross browser compliant, when tables were simply so much easier (most likely because I resent MS arrogance). Much of the time the box model hacks don’t work as expected (or IE keeps finding a way to occasionally blow up my layout just for spite).
And now, trying to find a valid replacement for thetag is also turning into the same kind of frustrating hit or miss art project. With many brilliant mad scientists’ experiments out there that work most of the time for most of the people and some of the time for some of the people yet hardly ever for a few poor saps.
There will eventually be a true working solution. Until then, I applaud those who keep trying. So <"embed" sound of applause>. But back to the drawing board.
I’m having most difficulties getting Windows Media to play in Firefox, especially if I don’t want the video to autostart. There is also problems getting ASX files played among all browsers. Pointing directly to the WMV file usually works fine, but if you wrap it in an ASX file, I’ve found the content type ‘video/x-ms-asf’ to work better than the ‘video/x-ms-wmv’ proposed in this article.
And either way, I can’t find a way to display WMP’s controls in Firefox, so if you manage to get ‘autostart=0’ to be respected, there’s no way to actually start the video since there’s no play button. Frustrating.
I tried to implement this technique to embed an IFRAME content while not using the iframe element. I spent quite a few hours in doing this and came home with some results, and a lot of informations on how current UA deals with supposed standards.
If you are interested, find the post here: http://exploded.awcr.org/iframe
I’ve tried to use the
Robson,
With IE use ActiveX and with other browsers use NPAPI. And remember to use conditional comments especially since some Firefox users might have unofficial ActiveX plugin(ax in user-agent string)
code get messed should read < ! - - [ i f ! I E ] > without extra spaces.
I’m at my wits end… I have used every code I know to embed a WMV file on my splash page, yet it keeps appearing with the controller, even though I have controller=false in my code. (C:WebsitesCHLBIchl_splash1.htm)
It works fine with my MOV page.(C:WebsitesCHLBIchl_splash2.htm)
Source:
Any help would be GREATLY appreciated!
Glenn
Well, I now have a hybrid of the Castro method and the Apple method….and I’m begingin to loose control of things!
All was going well – even IE 6.0.29 with SP2 under Win XP Pro was behaving (as was Safari 2.04, FF 1.5.0.8 & IE 5.2 all under Mac OS X)! Then I installed FF 2.0 under Win XP Pro – and now I’m back to square 1 with pormpts to install stuff!
It seems as soon as you fix this for one bunch of browsers, and begin testing on the next – the bubble pops. Is there a definitive version of the code structure out there will enable the embedding of MP3 files with a controller, without having to click through a thousand dialogues and sign your life away? Is it really that much to ask for?
Anyone come across the problem with scrolling embedded videos within scrollable DIVs?
I have embedded a video (youtube,google) within a scrollable DIV and upon viewing them on the mac browsers — Safari, Opera, OmniWeb and InternetExplorer, it produces an undesired effect.
Firefox seems to be an exception, but the browsers mentioned above doesn’t recognise the boundaries of the DIV. So the video is not hidden at all within the confines, and when you scroll down to view the rest of the content underneath, a ghost image of the video remains..
Here is a link for a simple demo
http://mcdxliv.cabspace.com/sample.html
The coding is straight forward. I just want to know if this is a known issue, if so are there any methods around it.. (searching the web has been to no avail). Also are PC users experiencing the same?