A couple of years ago, I wrote an article for A List Apart detailing a method that could be used to embed Macromedia Flash movies in a valid XHTML document. For those not familiar with the thorny issue, traditional techniques involve using both XHTML’s object element and HTML’s embed element to support all browsers. The XHTML specification cast aside the embed element, leaving developers high and dry when it came to adding a Flash movie to an XHTML document.
After some experimentation and testing (quite a bit, in fact), I discovered a method of using the object element alone to get Flash playing in pretty much every commonly used browser. The technique had one problem, however, and that was that Internet Explorer wouldn’t start the Player until the entire file had been downloaded – the user would have to wait for the entire movie to download before it would even play the first frame.
After a bit of thinking, I devised a work-around that used a small container movie as a loader. By referencing the container movie in the code and then having this movie load the real movie, the effect of streaming was reinstated for IE users. I wrote up my experience, explaining the steps I’d been through, and we called it Flash Satay.
Well, that was two years ago now, and the technique has seen a pretty good uptake. You can even see it in use at Disney. At the time of writing I believed that someone would quickly pick up the work I’d done and come up with the next magical step that made the technique even more usable – to my mind we were at the start of the valid Flash journey, not the end of it. But apart from techniques which rely on JavaScript (something that Satay avoids, and in many cases cannot be relied upon), I’ve seen nothing which particularly furthers what I wrote about in November 2002. Perhaps we’ve hit the limitations of the current browsers already – it wouldn’t be the first time.
So as you can imagine, I was interested to see a technique by Daniel Duris posted around a lot lately. Daniel claims to have a technique that improves on Flash Satay by eliminating the need for a container movie. ‘Great!’ I thought. However, careful readers will note that, erm, it’s just Satay without the container. Go figure.
In September 2003 there was a lot of fuss kicked up over patents on embedding plugins in web pages. This was going to be a big deal, and Microsoft went as far as engineering a patched version of IE which had the user click OK to prompt before starting any Flash on a page. The development community and big players like Macromedia scrambled, and came up with a whole bunch of methods to circumnavigate the new code. As it turns out, the whole thing blew over and it wasn’t necessary.
Following the incident, Jeffrey Zeldman asked if I wanted to write a follow-up piece to Flash Satay, reflecting on the changes since the article was first published. The truth was, however, that there had been no changes. There was nothing new to add. There still isn’t.
So, Ladies and Gentlemen, introducing the new old way to embed Flash movies in XHTML: Flash Satay.
Comments
Look here under the heading ‘Making Progress’.
Oh, just finished read the rest of your article and I understand everything now, but I do notice that on your comment preview page, the sidebar extends past the main column.
I’m still curious about how well the range of browsers people use today handle various plugin-related operations when not using the EMBED tag:
- visibility (the easiest: does it appear?)
- compositing instructions (WMODE)
- data-passing (via URL, or via things like FLASHVARS)
- browser/plugin intercommunication (see “liveconnect”, eg)
- DOM location (including JavaScript-based versioning tests)
- other functionality (working in a frame, or with various dynamic JavaScript writes of the markup, in a FORM, the streaming issue discussed above, etc)
The browser invokes the extension, and EMBED was the de facto standard before IE/WIN’s OBJECT use or the later de jure HTML recommendation. I don’t know that various browsers have documented the range of functionality they now offer with a straight OBJECT, rather than the usual nested OBJECT/EMBED. Anybody got hard data?
tx,
jd/mm
Pretty much all I’ve ever heard from Macromedia on this issue is where’s the hard data? over and over again. That’s understandable. It’s an important issue, and it affects an awful lot of Macromedia customers. If Macromedia Flash were my product, earning me thousands (millions?) of dollars each year, I would be looking for answers to those questions.
But it’s not my product – it’s yours. I don’t have QA engineers, test facilities or experts in every aspect of the technology on hand. It’s not in my interest to make sure Flash can be used with liveconnect or wmode in modern web sites – only whether I can accomplish the task I need to accomplish today for the audience I’m targeting. Simply put, it’s not my problem. It’s yours. Can your product remain viable in a world where the standard mark up language excludes its use?
You guys tell me, John – have you got any hard data? I think your customers would like to see it too.
“Pretty much all I’ve ever heard from Macromedia on this issue is ‘where’s the hard data?’ over and over again.” Nah, that’s mostly me, not “Macromedia”... I’m not sure of anyone else at the company that has gotten in on this topic of “When will it become safe to use only the OBJECT tag?”
My big objection has been to the experience of “hey it didn’t break when i did it!” being extrapolated “it is now safe for everyone to do lots of similar things!” On a computer, just because one thing works one way one time, doesn’t mean that all related handlings will always work. Nailing the tested environments is a necessary first step.
Let me repeat that: Nailing the tested environments, and exactly what has been tested in those environments, is the necessary first step.
“But it’s not my product – it’s yours.” Actually, no… you’re attempting to describe how the various browsers invoke extensions. Going to the browser-makers’ documentation is the first step. Testing their various implementations is the next step.
One of my partners in tech support tried to go across browser brands/versions/platforms awhile ago, to see how each handled various semi-documented angles of extension use, but even that was a dicey article, because Macromedia staff can’t effectively write browser documentation. You can see those interim results here:
http://www.macromedia.com/go/14159
The core, underlying problem has been that the W3C’s HTML group set their EMBED-denying spec late, a few years after the browser manufacturers and the web-development community had been using EMBED and OBJECT to invoke extensions, and the W3C never supplied a path for the real world to join their ideal world. It is a messy process to suddenly tell the real world that it is wrong.
“The wmode parameter continues to work with Flash Satay.” But… in which browsers? In a table? When the tag is written with JavaScript? etc
(“LiveConnect” and other browser/extension intercommunication methods are rarely used, true, but these let the browser send and receive messages to a plugin or control, and let two plugins or controls talk to each other within the page… a little different than having the extension communicate with the server.)
jd/mm
Ah, I see the context of your comment now. Point taken, I guess in those situations (Which are rare) a developer can choose to embed their Flash in HTML without Flash Satay.
You mean When will it become safe to continue using Flash? ;)
I don’t believe this is purely a browser issue. Macromedia are selling a product and recommending its use on the web. Isn’t it due diligence to test it in that environment? And to keep retesting as the environment changes? There seems to be some complacency that as Flash worked fine in HTML4 pages back in 1997 it’s fine to carry on that way. I personally don’t know of any professionals build new sites using the HTML4 of 1997.
Similarly, it’s unreasonable to expect browser makers to do this work for you. Flash is fairly low on the food chain. Probably lower than you guys at Macromedia perceive.
Mite rhetorical, but yes, the recommendations have been to use the markup the browser makers themselves have recommended.
What you’re trying to address now is the W3C’s sudden deprecation of an existing tag. If you recommend to others that they shun EMBED, then it’s good to first test what the actual results are.
(And, of course, we’re not talking about “just flash”, but about any browser extension invoked by these tags.)
There’s very little about the adoption of XHTML that is sudden. The recommendation itself is four years old. The fact that professional developers have already adopted XHTML means that no one is recommending EMBED be shunned. It’s been shunned. Flash is already out in the cold – we’re just looking for ways to let it back in.
Pointing the finger at the W3C and browser makers and saying it’s too hard isn’t really an answer either. On behalf of developers out there creating and publishing Flash content every day, please please work your butt off to improve how Flash is implemented… so we can have faith that Flash has a future on a standards-based web. With one company holding 90% of the browser market share it’s not like you have many doors to knock on.
I applaud Drew’s original Flash Satay article, and am also very dissappointed that no real progress has been made since then.
I don’t see a big problem in using it though. As long as it is a fallback for a correctly used OBJECT element which can be interpretid by all browsers who support HTML 4.01 and have the flash plugin but don’t support EMBED.
Drew, have you seen Ian Hickson’s method from a while back, by the way?
Now what if Microsoft decided to work on their way overdue Internet Explorer 7, and have that stream Flash content directly from the
objecttag, instead of behaving like it does now? The container movie would be unnecessary, and we wouldn’t be discussing this.I just tried Ian Hickson’s method, it works fantastically. In fact, having made some quick and dirty testing, it seems to stream perfectly in Internet Explorer. I applied the technique, so go see it in action—both top menu, and bottom frame content preloads and streams perfectly. And yes, it validates.
Apologies for a double post, but this is exciting. Thanks so much Anne, I hope this is not too good to be true.
I’ve been able to pass this info in as attributes on the object tag instead, but it’s not exactly a clean workaround.
So flash satay is kinda broken unless you ignore Safari. (or don’t use flashvars, salign, bgcolor, etc. etc.)
You may be able to set the background color using some css, but the flashvars and the salign is a pretty big deal.
As for the Explorer – I have tested it on slower lines and small Flash files around 150 KBs are being displayed almost immediately. Of course that’s not true for huge Flash whatever files like movies etc….
Another reason I have created that page is that at the time of putting up the example there was not any such tutorial except Flash Satay (again container needed). Please note that in Flash Satay’s example there is no such use as described in my example (Flash without container with IMG tag alternative). I have actually combined both to make this example.
http://infiniteexpanse.net/articles/16/fixing-flash-javay-for-mac-ie-5
Had to say thanks so I hunted up this blog from the Flash Satay article. THANKS!
Up until today we’ve had no complaints at all (although I suppose we wouldn’t get a complaint from someone for whom the Flash ad doesn’t work). Today someone emailed in saying that they were continuously prompted to download Flash. We’re currently trying to track down precisely what circumstances they have.
I’m not a fan of Hixie’s method just because it’s non-standard, so damned ugly and if I’m going to “hack” I’d rather do it to something proprietary, like the Flash file instead of the HTML file. But, horses for courses – it does work.
As for the Duris “method”, it’s not really any special method at all. I wouldn’t even say it’s “the same as Flash Satay”. It’s just how you’re supposed to be able to use an object element. Unfortunately, it simply doesn’t work.
For something like that you might consider using javascript to detect the plugin and write the content to the page instead. This way you can detect the player and offer alternate content (even if they have flash but not a high enough version).
I just put together a little javascript flash embed, you might want to check it out.
I used your lean method today to include Flash and to assure a replacement picture to be shown if someone has no Flash (or definitely an older version than number 5). Until today we used Javascript for this matter but it had drawbacks.
Now everything works fine – except on Safari. Safari won’t show the replacement picture at all. And unfortunately there are very few informations dealing Safari and its bugs.
Greetings from Germany
Jens Grochtdreis
The Gillay Method looks promising. How about making it easy for us to check quickly by putting a small flash movie in that page itself? Then we can read the article and immediately see if the method works in whatever browser we’re using at the moment
This means that I have my requested Test page right here :)
Still hack-y, but self-contained. I don’t tend to mind hacks wherein you’re hacking the browser that does it wrong. This one is amusing because the hack uses Microsoft proprietary stuff that only IE sees in order to confuse IE. :)
I think the Satay method is the ideal way of embedding Flash in xhtml pages. And I’m not sure why this is sometimes a problem in IE. Is this a bug in the Flash Player for IE or a bug in IE itself? I’d like to revert this question to John Dowdell if he’s willing to return to the discussion…
Fact is that Microsoft seems to have totally abandoned IE and left the largest part of the web-population with a malfunctioning browser – which just sucks! Fact is also that IE was great, back in 2001, but it just doesn’t cope in todays circomstances. It needed a version 7.0 at least two years ago.
Maybe the focus should be in ‘reverting’ everyone to use a happy browser until those are being exploited and the whole process starts over again…
I’ve implemented Satay in Routecraft and it validates nicely as strict xhtml.
Compliments to Drew McLellan and to the people who made all the alternative methods.
I have used it to successfully validate non-ASP pages but with ASP pages… oh boy! back to square one. So what’s a developer to do???
Has anyone found a successful way around the block in ASP ?
Take a look at “link text”: http://www.doth.com/kwanzaa/guestbook/xml/xml.asp
Never mind the validation button on the bottom: That was there before I ran into the ASP problem. I used a template. Had to detach this and another ASP page from the template after running that dreaded ASP error code.
Any suggestion????
Don’t believe me…. go to www.doth.com/kwanzaa/TEMPLATE/test.asp in IE
I had to restore xml.asp as the guestbook is in a functional site (i.e. “Live” site).
Flaccess
FlashObject
Flacess particularly is really easy to implement, and allows for alternate content if Flash is not present.
First time blogger, and I don’t know if this question was answered on 24 through 26 of this blog, but from what I’ve been able to test, the flash I use on my website works great on IE and Mozilla, but the colors are off on Safari which looks horrible. I took out the embed tags and I’m pretty sure I used the Flash Satay method on the markup. Is there any way that I can make the flash background the same as my dreamweaver background as it is in the other browsers.
Thanks!
As long as you set the width and height attributes in the <object> tag, everything else you load in should fit perfectly.
with this a flash application loads directly into the browser after zero seconds. in turn the swf is calling up xml data, images, audio, video and animations.
i started doing this because i wanted the swf to scale to 100% the browser window also on linux machines, for which the width=”100%” height=”100%” parameters of object and embed were not working consistently.
does anyone recognize possible problems with this method? please explain.
meta http-equiv=”refresh” content=”0;url=http://www.leuchtendgruen.net/luminousgreen.swf”
another thing i’ve read (forgot where, search for it) is how some SVG enthusiasts are dealing with the problem : create an internal DTD for it so it will validate.
Embed tag it still seems to have trouble in other browsers example: IE 5.2 MAC. I my self have been trying to get flash to validate in xhtml, and I tell you there is not a whole lot of info on this topic. (gald u posted this)
Unfortunately it this is still not working in some of the widely used browsers such as Mac versions of IE.
I was wondering if you could possibly help me out in regards to the flash satay method. I am a designer currently working on updating my the website for the business I work for www.netgrow.com.au to make the website validate in xhtml I followed the procedure you described for two flash movies a menu and a header. However when I view the page I see a box with a missing image symbol in it where the menu is supposed to be for a short period of time before the page finishes loading. This problem dissapears if I change it back to flash but not if it is application x.
It would be great if someone would have time to look at this problem and see if there would be solution. If you require any other information or files please email me at shaun@netgrow.com.au
In regards to my earlier message I realised that despite the fact of using the flash satay method the reason why I am having a problem is because the flash movie is i a layer. It appears that satay does not work fully when a flash movie is in a layer and because it does not allow Internet Explorer to stream flash moives even with a container clip.
Does anyone have any suggestions?
Thanks
Thanks to the original post.
if so can you please email me @ the above email, it would be greatly appreciated
Thank You, John
does anyone know how i can change http://www.electricartists.com/scarface/soundboard.html into a HTML Code FOR MY WEBPAGE?
if so can you please email me @ the above email, it would be greatly appreciated
Thank You, John
Drew, perhaps you can take a look at this thread in the TxD forums. It seems there’s a little bugginess in Firefox v1.5 with relation to Satay. Perhaps you’ve got some ideas how to debug?
n/m – looks like a Firefox extension bug.
I have been round and round in circles trying to get Flash Satay to work – I simply DO NOT understand FLASH and have no idea how to create C.SWF – I have downloaded the application and it is totally beyond me…
Why don’t I want to use any of the other methods you ask?
I am trying to avoid Active X and if I am right having the CLASSID tag makes Windoze call this?
I do however want my movies to stream in IE but in particular I want to be able to mail movies to Outlook users who have Active X disabled and have them display in the body of the email from an external URL…
Most of these methods described work for Apple Mail – but not in Outlook (because Active X is disabled) –
Anyone…
Thanks
Mark
For the ASP or .NET developers, there is a non-Satay way to get pages to validate. I leave the OBJECT tag in place, but then I grab the HTTP_USER_AGENT string and depending on an IndexOf string argument, I don’t render the EMBED tags if either of the following conditions are met:
1) The string ‘MSIE’ is found in the UserAgent (meaning Explorer is being used and the embed tags aren’t even necessary.
2) The string ‘W3C’ is found in the UserAgent (W3C’s validator returns a different UserAgent string containing “W3C” so the EMBED tags will not be rendered and therefore easily pass validation.)
This means that, yes, EMBED tags will still show up on Netscape-style browsers, but that’s the only way I know of that gets around the Satay method completely. Not that I’m saying Satay shouldn’t be used, but it still has enough quirks in certain browsers to make me use a dynamic alternative.
Hey Mark, im in your boat too! I have now spent an evening trying to figure out how on earth to use the container method. Going bald. It needs to be in more detail – I can get as far as placing something in the root of my container movie then the rest has me looking blank..
Also can not get Satay method to work in firefox. Works in IE7.
Wondering about just going back to embed! It would be nice if write ups werent always aimed at people who know what they are talking about! Some of us newbies do like to learn new things too!
:)
stuck.
Thanks
Delia
am i the only person who is running into the problem of satay not working if you put it in a double nested table (in net 4.7, yes its old but we are gov and its gotta work)?
i took the code from the page exactly. put it in a table, it works. put the table in a table, and it crashes. go figure. can anyone help?
Hi folks,
I am experiencing a recurrent problem with the flash satay method, I wouldn’t call it an error, the movies load up OK it’s just that for a split second either before the container or main movie loads in I get an image missing icon in place of the flash movie. Anyone out there have this problem?? Is it purely a file size issue or is there something I am missing?? If there is any one there who has had the same problem and has discovered exactly what’s going and how to prevent it I would greatly appreciate your feedback.
Cheers, Paul.
Just wanted to say thankyou to Drew firstly – working for local government, means that javascript is a no no – with the recent change to IE (patent probs) and the latest Firefox update – I’d pulled enough of my hair out – the Satay didn’t work – lol – but it paved the way for Jason’s ‘Gillay’ method which works lovely.
So thank you both!
Tina,
Have a look at http://www.tameside.gov.uk/tmbc2/deaf-sign.htm
It’s double nested using the Gillay method.
Should be what you’re looking for.
Alan
Mark –
I’m with you on creating the container file. It would be great if someone could take a few minutes to elaborate on how to create it.
I am hoping if I could get the satay working correctly, then it could be tested in Outlook and other browsers.
Can anyone help???
Thanks.