Web Standards Flash embedding (Part 2)

Since I posted the FlashObject embed I got a little bit of feedback on the validity of the Javascript I used (Specifically the document.write and node.innerHTML methods) and how they relate to XHTML pages served with mime types of application/xhtml+xml. The short version is ‘they don’t work at all’ and in fact fail miserably by not even providing the alternate content.

You may be asking: Is this really a problem? I say not yet. The only time this will ever be an issue is if you are serving your XHTML pages with mime types of application/xhtml+xml. I don’t know of any websites at all that serve their content like that, so as long as you stay in text/html land, you will be fine.

In fact, here’s a quick list of your favorite web standards compliant websites with their doctypes and the mime types of their content: (If you want to check your own site and have access to a Linux/OS X machine, try ‘curl -I -H 'Accept:application/xhtml+xml' mysite.com‘ in the terminal)

csszengarden.com (XHTML 1.0 Strict) – text/html
webstandards.org (XHTML 1.0 Strict) – text/html
wired.com (XHTML 1.0 Transitional) – text/html
abcnews.go.com (XHTML 1.0 Transitional) – text/html

And the list goes on – sprintpcs.com, disney.co.uk, kcchiefs.com – all text/html mime types. My point obviously being that there is no demand right now for DOM Javascript when it comes to embedding Flash or doing other web/XHTML related things. I think it’s pretty safe to say that we’ll have another couple of years before we really have to start worrying about combining Flash and XML documents.

With all that said, I did mess around with some DOM Javascript without much success. Mozilla / Firefox handled it pretty well and all is great there, Safari seems to ignore the param tags inside the object tag, Opera is very strict (perhaps too strict?) and wouldn’t even let me use setAttribute for width or height on the object tag.

I’ll write up a whole thing on my findings soon, and possibly provide a hacked together DOM way of embedding Flash, but I won’t be recommending that you use it, as the file size will most likely be larger than using a simple document.write or innerHTML.

UPDATE (10-31-2004): This guy over here thinks that I’m advocating the use of text/html mime types. Well I’m not, this is just pointing out that since so few websites serve content as application/xhtml+xml that using node.innerHTML or document.write will work better compared to the alternative DOM methods, which are such a pain in the ass, I keep putting off building the sample page to show how you do it.

About this page

blog.deconcept.com is a blog about nerdy internet stuff edited by Geoff Stearns since late 2004.

This entry was published on October 20th, 2004 and is tagged as flash, javascript, xhtml.
You can follow any responses to this entry through the RSS 2.0 feed.

Cezary Tomczak 10/21/2004

I know an example: http://www.dynarch.com/ & http://www.bazon.net/mishoo/ are served as text/xml (that is what tells me page info in firefox) and as you can see the javascript is used there quite extensively.

Geoff 10/21/2004

Both of those sites are served as text/html:
deconcept:~ geoff$ curl -I -H 'Accept:application/xhtml+xml' http://www.dynarch.com HTTP/1.1 200 OK Date: Thu, 21 Oct 2004 20:34:29 GMT Server: Apache/1.3.31 (Unix) PHP/4.3.8 mod_ssl/2.8.19 OpenSSL/0.9.7d mod_gzip/1.3.26.1a mod_perl/1.29 Set-Cookie: DASessID=a0bc4a5f4447c7a4976d8fc6a4d79776; domain=dynarch.com; path=/; expires=Sat, 21-Oct-2006 20:34:29 GMT Content-Type: text/html; charset: UTF-8; charset=utf-8deconcept:~ geoff$ curl -I -H 'Accept:application/xhtml+xml' http://www.bazon.net/mishoo/ HTTP/1.1 200 OK Date: Thu, 21 Oct 2004 20:34:48 GMT Server: Apache/1.3.31 (Unix) PHP/4.3.8 mod_ssl/2.8.19 OpenSSL/0.9.7d mod_gzip/1.3.26.1a mod_perl/1.29 Set-Cookie: site-prefs=dark|left|14; path=/mishoo Content-Length: 3816 Content-Type: text/html; charset=UTF-8

Cezary Tomczak 10/22/2004

So why does Firefox keep telling me that it is text/xml ? Right mouse button -> View Page Info -> content-type = text/xml; charset=utf-8
All 4 examples you mentioned in View Page Info are text/html, even your site, but dynarch.com is text/xml :\

Okay sorry :) Looks like this is only a META tag: <meta http-equiv=”content-type” content=”text/xml; charset=utf-8″ />

!!blue 10/22/2004

This website should be: Splintered. I Received the link via the WSG mailing list.

Geoff 10/22/2004

They also don’t have any Flash or Javascript at all.

C. Ovidiu 10/25/2004

I serve my page as application/xhtml+xml to browsers that declare (via HTTP_ACCEPT) that they can handle it :). It’s true that 99.99% of the XHTML pages are still served as text/html, but that’s probably because Internet Explorer doesn’t like it any other way.

Todd Dominey 11/07/2004

Safari seems to ignore the param tags inside the object tag

Are you saying that Safari won’t load parameters like FlashVars then? And as for the object tag, I was under the impression that Safari used the <embed> element, not <object>. Wrong?

Geoff 11/07/2004

Well that’s kind of a grey area…

Since according to the w3c there is no such thing as an embed tag, I don’t want to use it when building a Flash embed that would be XHTML friendly. In fact, when using the DOM, Opera won’t even let you create an embed tag, so you are stuck with hacking the object tag together even though it has pretty crappy support for it like not able to append width and height to an object tag using DOM scripting methods.

As for Safari, anything you put in as param tags will be ignored, but to work around that, you can set everything as an attribute on the object tag instead. Unfortunately this won’t validate since there is no such thing as a flashvars attribute in the XHTML spec, but if you do it with Javascript it works and will validate.

The question of whether this is proper or not is of course another question, but since it won’t really work any other way, there isn’t much of a choice.

Craig LaGrow 11/11/2004

Geoff,

I love you js code, but I’m having trouble figuring out how to implement it with regards (especially) to my flashvars code (below) … In the of my page, where the <object> would go, what do I need to do to simplify the currrent flash code below?

[code removed]

Geoff 11/11/2004

It would look like this:

myFlashObj = new FlashObject("_assets/cyber-btns.swf", "cyber-btns_JOURNAL", "160", "30", 6, "#ffffff"); myFlashObj.addVariable("varLabel", "THE+JOURNAL"); myFlashObj.addVariable("varAction", "window%2Ealert%28%27JOURNAL%27%29"); [add the rest of your vars] myFlashObj.write();

This is assuming that your movie is Flash 6 – you’ll have to add in each of the flashvars serperately as well.

max 01/22/2005

i am using something entirely different to load flash with XHTML and i would be interested in your comments or suggestions about this

meta http-equiv=”refresh” content=”0;url=http://www.leuchtendgruen.net/luminousgreen.swf”

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 you recognize possible problems with this method? please explain.

thanks in advance!

Geoff 01/22/2005

Yes, there are a number of issues with that method:

1) If you want to pass specific parameters to the flash movie you can’t do it using param tags like you normally would – you would have to set them in the swf using the Stage object.

2) If you want to pass variables to the Flash movie by using url parameters, you are limited to the number of characters you can pass in a url string (some browsers have different limits than others)

3) Not all user agents will know how to run a swf movie that is linked directly from the server. Most modern browsers can handle this just fine, but what about new handhelds that might try to download the Flash movie? This could also happen if the web server is not configured with a mime type for Flash movies, causing your users to be prompted to download the .swf instead of displaying it in the browser.

4) You aren’t using any kinds of Flash detection, which means a user without the Flash plugin installed will not be able to view the Flash movie, and without the information in the html page telling the browser where to get the plugin files, the user will have no idea what type of plugin then need to view your file.

5) If a user as an older verion of the Flash player than your Flash movie needs, they may get unexpected behavior when they view your movie. (if they have Flash player 6 and your movie is a Flash 7 movie)

It’s not very difficult to make your Flash movies play at 100% with and height. I’ve recently posted a page that shows you exactly how to do it here.

deconcept

Web Standards Flash embedding (Part 2)

About this page

Comments are closed