Web Standards Flash embedding (Part 2)

Posted on by

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)

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.

13 thoughts on “Web Standards Flash embedding (Part 2)”

  2. Both of those sites are served as text/html:
    deconcept:~ geoff$ curl -I -H 'Accept:application/xhtml+xml' 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-8

    deconcept:~ geoff$ curl -I -H 'Accept:application/xhtml+xml' 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

  3. 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 :\

  7. 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.

  8. 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?

  9. 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.

  10. 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]

  11. 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.

  12. 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!

  13. 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.

Comments are closed.