FlashReplace – A light-weight JavaScript to insert Flash movies into your web page

Updated April 20th

I’m so used to having a $ method for accessing elements. Nevertheless, the idea is of course that FlashReplace should be stand-alone, so I replaced it with the standard document.getElementById.

Updated April 20th

Although I didn’t encounter any problems with not using an embed element (to have valid HTML code output), it has been strongly recommend that I use it to ensure maximum compatibility. Therefore, it has been added and the file size is now 2.1 kb.

Updated June 3rd

I’ve gotten a few e-mails asking how to add variables to the Flash movie, so here are some options:

The simplest way is to just do it through a querystring. I.e. “movieFileName.swf?testVar=hello”.

Another option is to reference the movie and do it something like this:

document.getElementById("movieName").SetVariable("testVar", "hello");

Ok, everyone and his mother are creating scripts to include Flash into a web page. I wanted to have my own version, but with less and more readable code, so here’s my JavaScript to include flash : FlashReplace.

Besides that I wanted to write the script myself, there were a few things about the two major scripts (that I’m sure you are all well aware of, SWFObject and UFO), that I didn’t like:

  • I didn’t find the code that easy to read, and tweak, if wanted.
  • The file size. SWFObject is about 6.7 kb and UFO is about 10.7 kb. I’m a sucker for small file sizes, so therefore FlashReplace is only 1.8 kb 2.1 kb. :-)
  • Neither of them created standards-compliant code; FlashReplace does. Not anymore. Now it creates an additional embed element for maximum compatibility
  • Several lines are needed to insert a Flash Movie. FlashReplace only needs one line.

I have the utmost respect for the people creating those libraries, and it is definitely likely that I’ve missed something when I wrote my script. Nevertheless, it seems to work fine in all major web browsers, so I share it with all of you in the hope that you will like it. And, of course, if you find any flaws, please let me know!

My version: FlashReplace

FlashReplace is a little object with a few parameters to include a Flash movie into a web page. It should also work fine with streamed movies and get us around the Eolas patent problem in IE. It basically just supports one parameter and one method:

defaultFlashVersion
A property to set the default Flash version to look for, if it isn’t set with the Flash movie creation.
replace
A method that replaces the content of a specified element within the web page with a Flash move. Basically, the element with the fallback content if Flash player isn’t available.

The parameters for the replace method

To be more specific, the replace method consists of a few parameters:

elmToReplace
The id of the HTML element where you want to replace the content with the Flash movie.
src
The path to the Flash movie (i.e. the swf file).
id
The id to give to the Flash movie element.
width
The width of the Flash movie.
height
The height of the Flash movie
version (optional)
The version of the Flash player needed to see the movie. Defaults to the defaultFlashVersion property of the FlashReplace object if not specified.
params (optional)
A way to add as many parameters as you want to the Flash movie.

Code examples

First, include the FlashReplace JavaScript file:

<script type="text/javascript" src="js/FlashReplace.js"></script>

Then, create a JavaScript block to insert the Flash movie/-s you want to:


<script type="text/javascript">
    FlashReplace.replace("flash-content", "/flash/my-movie.swf", "flash-element-id", 800, 200);
</script>

Naturally, you can put a JavaScript block exactly where in the code where you want each Flash movie to be created, you can have all of them in the same code block at the bottom of the page, or you can have them in an external file:


<script type="text/javascript">
    FlashReplace.replace("flash-content", "/flash/my-movie.swf", "flash-element-id", 800, 200);
    FlashReplace.replace("da-cool-header", "/flash/cool-header.swf", "flash-element-id", 600, 350, 7, {wmode : "transparent"});
    FlashReplace.replace("sidebar", "/flash/sidebar.swf", "flash-element-id", 200, 700, 7,
        {
            wmode : "transparent",
            quality: "high",
            bgcolor: "#ffffff"
        }
    );
</script>

What’s missing?

What it does miss, though, that the other JavaScript options contain, is a express install feature that I didn’t think was all that needed. I might add this in a future version if it’s really asked for, but at the time, simplicity and a very small file size were my main goals.

Feedback!

Please, give it a whirl, kick the tires. Tell me if it works fine for you, and your general take on it. Enjoy! :-)

Posted in Developing,JavaScript,Technology |

162 Comments

  • Andy says:

    Can't wait to try this one out!

  • inoodle says:

    Nice, I'm just trying it out at the moment.

    Not sure that it matters, but you've don't have closing slashes on param elements…

    Its working though. I'll update shortly.

  • inoodle says:

    Ok, all working very easily – perhaps I should test in something other than the fox though :).

    Anway, let me be the first to present…. wait for it… *drum roll*

    Unobtrusive Flash Replacement

    Or at least the first with your library :)

    Cheers,

    Aaron.

  • [...] eres usuario SWFObject, te gustará FlashReplace. Archivado en: Flash javascript minipost programación [...]

  • Great Robert, good job on keeping the file-size so low! :)

    @inoodle: closing slashes on HTML tags are only interesting if you feel the need to support XHTML.

  • inoodle says:

    @Harmen

    Yeah I forgot about that HTML thing! :)

  • [...] kommer ett tips pÃ¥ tvÃ¥ användbara JavaScript. Robert Nyman har skrivit ett litet och nätt skript för att infoga Flash-filmer pÃ¥ en webbsida. Och Binny VA har skapat ett smidigt skript för att hantera kortkommandon. Kolla [...]

  • Robert Nyman says:

    Andy,

    Good luck!

    inoodle,

    Nice, thanks! And yes, the unclosed <code>param</code> elements are becuase it is meant as HTML. However, if you want it inan XHTMl solution, you can easily tweak the file to ensure it's valid XHTML.

    Harmen,

    Thanks!

  • Looks like a nice solution. I will have to give it a run. I have been using SWFObject for ages now. Maybe I should reconsider.

  • inoodle says:

    The nice thing about using the $ in the previous version, was the ability to pass in an element directly, instead of the id – which removed the requirement to actually have an id on the element to replace.

  • inoodle says:

    Robert, I updated my example with your newer mods, but also did some slight modifications to the script myself: Unobtrusive Flash Replacement

    What was the main reason (/browser) needing the embed element btw ?

  • Robert Nyman says:

    James,

    I hope you will like it!

    inoodle,

    Absolutely, you can tweak it to use the <code>$</code> method if you want, but just in case you don't, I wanted the file to able to work stand-alone.

    From what I've heard, other web browsers than IE might need the <code>embed</code> element in certain combinations/scenarios, so I thought it best to add it just to make sure.

  • [...] FlashReplace – A light-weight JavaScript to insert Flash movies into your web page – Robert’s tal… Lean, light-weight flash insert (tags: webdev javascript flash robertnyman) [...]

  • TamÃ&Ac says:

    Hi Robert. Why do we need the embed element?

    <object type="application/x-shockwave-flash" data="something.swf" width="any" height="any">

    <param name="movie" value="something.swf" />

    <param name="loop" value="false" />

    <param name="menu" value="false" />

    <param name="quality" value="high" />

    <param name="bgcolor" value="any" />

    </object>

    This little code isn't enough? (using html, xhtml or javascript)

  • [...] the SWFObject seems to be the popular choice at the moment. However, I recently read about Robert Nyman solution, which looks very promising and at a small 2.1KB, who could you go [...]

  • Robert Nyman says:

    Tamás,

    As mentioned in the post and in a comment above, I personally haven't had any problems without the <code>embed</code> element, but people with vast experience of Flash and compatibility have recommended me to use it.

  • I'm not very happy with the size of SWFObject either, so I'll definitely be considering this for future projects.

    You're probably already aware of this, but the SWFObject folks had to change the name of their script from "FlashObject" because of legal grumbling from Adobe. You might want to consider something similar, just as a <acronym title="Cover Your… ya know">CYA</acronym> measure.

  • Robert Nyman says:

    Adam,

    Please try it, and let me know if it doesn't work out for you.

    I know about that with SWFObject , but at the end of the day, we'll see where it leads.

  • [...] alternative solution to this problem is my FlashReplace [...]

  • [...] FlashReplace – A light-weight JavaScript to insert Flash movies into your web page – Robert’s talk (tags: flash javascript embed scripts code webdesign webdevelopment html library resources web) [...]

  • Niko Nyman says:

    How do you pass FlashVars to the loaded SWF? The "old way", by url encoding them and adding after filename.swf?

  • Clarence Eddy says:

    In IE, FlashReplace shows a broken image while the Flash object downloads. It works as expected in FireFox. Any workarounds?

  • Robert Nyman says:

    Niko,

    You should be able to send in FlashVars, as a <code>param</code> in the object array described in the code above. Like this:

    {

    flashvars : "…",

    quality: "high",

    bgcolor: "#ffffff"

    }

    Clarence,

    Hmm, I haven't seen that problem. But in that case I guess it's a general problem that the Flash movie is too big? If that's the situation, maybe you might have an extra need to preload the Flash movie before the replacement is done alternatively have one small Flash movie and that then loads the other Flash movie.

  • [...] Robert Nyman has released FlashReplace, a lightweight JavaScript embed similar to SWFObject and UFO [...]

  • Wow! Big job. And a small file size :)

    I'll try it now!!!

  • Hi Robert,

    Nice work! As you mention both ufo and swfobject have their weaknesses. I prefer ufo though cause that one works with content type application/xhtml+xml and you can put all code in the head of the page which I think is nice. I haven't had any time to test your script yet but when I read your text I presume that your script only works if you put the script block somewhere inside the body, or am I wrong? If so, do you have any plans to make a version where it is possible to put the script in the head (which I think is some sort of "javascript best practices"). And the other question is of course if your script is working with xhtml+xml? ;)

    Keep up the good work..

    Best Regards

    Martin

  • Robert Nyman says:

    Martin,

    You can put the code wherever you want; be it at each Flash instance, in a <code>script</code> block in the document or in external JavaScript file.

    If it works with <code>application/xhtml+xml</code>? It depends… :-)

    It uses <code>innerHTML</code> to add the content to the web page. Certain web browsers doesn't support that with the <code>application/xhtml+xml</code> MIME type, but, for instance, Firefox supports it from version 1.5.

  • Nice! I'll try it out as soon I get some spare time and return back with more feedback :)

  • Lukeperry says:

    The variable assignent doesnt seem to work. At least not the way im doing it :-)

    If i want to ad a variable by the name of "testVar" with the value "hello" how would i do that?

  • Robert Nyman says:

    Lukeperry,

    <blockquote cite="http://www.robertnyman.com/2007/04/19/flashreplace-a-light-weight-javascript-to-insert-flash-movies-into-your-web-page/#comment-60243"&gt;

    If i want to ad a variable by the name of “testVar” with the value “hello” how would i do that?

    The simplest way is to just do it through a querystring. I.e. "movieFileName.swf?testVar=hello".

    Another option is to reference the movie and do it something like this:

    document.getElementById("movieName").SetVariable("testVar", "hello");

  • I use runfoo instead of the other javascript mentioned above. It is only 1.89 kb and easy to implement. Give it a try…

  • Robert Nyman says:

    shane,

    Which runfoo would that be? And, what with runfoo do you find easier to implement compared to FlashReplace?

  • olly killick says:

    freakin' awesome dude, well done on writing some kick ass code!!!

  • James says:

    Any news on the IE7 bug in this as posted by Clarence Eddy April 27th, 2007 at 8:40?

    When loading the flash you get a missing image placeholder in IE7 for a short time before the flash appears – very annoying.

  • James says:

    Follow up to the i.e7 problem … taking out the

    <code>((window.ActiveXObject)? ' id="' + id +</code>

    sorts it out… but what does it break…?

  • Robert Nyman says:

    Olly,

    Thanks!

    James,

    Nope, sorry. Personally, I haven’t seen that problem, so my advice to Clarence still stands, to use a preloader in the Flash movie, if the size is the problem.

    The part with ActiveXObject is there since IE seemed to need a certain classid to properly render, and the src for setting the path to the Flash movie. If you remove that check and serve it to all web browsers, it might not work in Firefox and others. If you remove that code completely and it works in all web browsers, well, go for it then. :-)

  • [...] mal wisssen, wofür die 11 KB sinnvoll sind. Ich habe bisher auch recht gerne Robert Nymans “FlashReplace” genutzt, das gerade mal um die 2 KB [...]

  • Rich says:

    Could you post a full example of how to use it?

  • Robert Nyman says:

    Rich,

    The code example in the post is exactly how you would use it when you were to insert a Flash movie within your document.

  • Ansgar Hein says:

    Great script and also pretty lightweight. However it took me hours and some good advice from others who had similar problems to figure out how to understand the manual.

    1. Put the for FlasReplace.js in the section.
    2. Create your HTML-element that you would like to replace, for example use and put some alternative content inside.
    3. Put the other for replacing your directly behind it in your HTML-code.

    That does the whole trick and everything else is – as said above – brilliant.

    Thank you, Robert.

  • Rich says:

    I did exactly what you said but it only worked when i put this part:

    FlashReplace.replace("flash-content", "/flash/my-movie.swf", "flash-element-id", 800, 200);

    In a function called MovieLoad as below:

    window.onload=MovieLoad;

    Otherwise, the script wasn't being triggered. Is there a better way of doing this?

  • Robert Nyman says:

    Rich,

    Make sure that the script is placed after the HTML element. My guess why it doesn't work for you is that you try and reference the HTML element before it actually exists.

    Do it like this:

    <code>

    <div id="flash-content">Where the Flash movie will be shown</div>

    <script type="text/javascript">

    FlashReplace.replace("flash-content", "/flash/my-movie.swf", "flash-element-id", 800, 200);

    </script>

    </code>

  • Rich says:

    GREAT!

    Yes, you were right. I've done as you said above and it works fine now, thanks!

    Great job, it is one of the simpler methods for including Flash around and as you say, more efficient, i'll be using it from now on for all my Flash projects! Cheers!

  • Robert Nyman says:

    Rich,

    Good to hear! Good luck! :-)

  • Jarrad says:

    new favourite, thanks!

  • Robert Cazan says:

    hello Robert.

    great method. It works great. But i have one little question…If i have multiple flash movies in a site, the script doesn't work. it shows only the last movie.

    what changes do i have to make to the script in order to become efficient and work for 2 flash movies?

    thank you

  • Robert Nyman says:

    Robert Cazan,

    Thank you! Do you have any example where I can look at? Because it should work with as many Flash movies as you want (given that you insert them into different elements, of course), just like one of the examples shown in this article.

  • Robert Cazan says:

    yes. the address is:
    http://www.robertcazan.ro/test/testing.html

    but i figured it out…finaly :)
    i used

    div id=”flash-content2
    script type=”text/javascript”
    FlashReplace.replace(“flash-content” …

    i think you can see the mistake… :( but it’s ok now because i found out :D
    i was changing only at div id, and not in the “FlashReplace.replace(“flash-content“” too…

    thanks anyway for your reply…i appreciate it.

  • Robert Nyman says:

    Robert Cazan,

    Greeat to hear! Good luck with things now! :-)

  • Robert Cazan says:

    hello again.

    I'm still working on my website, though Christmas is coming :D i have a question for you. Why Firefox doesn't show the flash (by using your method)? It works just fine in IE but in Firefox it doesn't… :(

    can you help me?

    <a href="http://www.robertcazan.ro” target=”_blank”>www.robertcazan.ro
    Thanks,

    Robert

    ps: Merry Christmas and a Happy New Year :)

  • Robert Nyman says:

    Robert Cazan,

    Hi. :-)

    I'm sitting on a Mac here, but tested your testing page (http://www.robertcazan.ro/test/testing.html) and it works fine in both Firefox and Safari.

    I looked through your other pages, but couldn't see you using FlashReplace anywhere else.

    Merry Christmas and Happy New Year to you too! I won't read the comments for some time now, but please post a URL to a page where it doesn't work, and I'll take a look when I get back.

  • [...] Now there’s a third viable option for embedding Flash using JavaScript. It’s called FlashReplace and was written by Robert [...]

  • [...] FlashReplace – A light-weight JavaScript to insert Flash movies into your web page – Robert’s talk (tags: flash javascript embed code webdev) [...]

  • bakkelun says:

    Does this script add Wmode=Transparent as default? It's very needed in my work environment, that's why I ask.

    sincerely,

    -bakkelun

  • Robert Nyman says:

    bakkelun,

    No, not per default, since it's fairly resource intensive. Just like the example in the post exemplifies, you need to specify this when you include the Flash movie. Like this:

    <code>FlashReplace.replace("the-header", "/flash/cool-header.swf", "flash-element-id", 600, 350, 7, {wmode : "transparent"});</code>

  • Marc says:

    Thanks a lot, the script works fine and is very useful! I had it running in less then 2 minutes.

  • JamesM says:

    I seem to get a error in IE 6 and 7 "Operation Aborted error " this is due to IE still loading and we are trying to write to the dom area

    Now swfobject has fixed this error see below would be nice to try and fix this in Flashreplace.

    Operation Aborted error

    We added a try-catch block around the document.write statement (that inserts a deferred script to simulate a DOMContentLoaded event for Internet Explorer) to ensure it properly degrades to the onload event and to avoid an Operation Aborted error (which indicates that you try to access Internet Explorer’s DOM, while it is locked and it is not ready for DOM manipulations yet)

    if (ua.ie && ua.win) {

    try {

    document.write("");

    var s = document.getElementById("__ie_ondomload");

    if (s) {

    s.onreadystatechange = function() {

    if (this.readyState == "complete") {

    this.parentNode.removeChild(this);

  • Robert Nyman says:

    JamesM,

    Yes, I'm aware of this general problem in IE, which basically targets any script manipulating the DOM before it's entirely loaded, not just FlashReplace.

    It is never a good approach to alter the DOM before it has loaded, so I'd rather recommend using code/a library which deals with changing content after the DOM has loaded (as opposed to when <code>window.onload</code> has been triggered). Options for that are ELO or the Load module in DOMAssistant.

    I wouldn't want to include this functionality into FlashReplace itself, because I believe anyone scripting should use some script detecting when the DOM has loaded anyway, and then that funtcionality would just be duplicated in FlashReplace, resulting in a bigger file size with just superfluous code.

  • JamesM says:

    Hi Robert thank you for your detailed answer, I guess the main idea behind FlashReplace was to make it lightweight and not to hold extra superfluous or doubled up code. I am not a programmer and some times even have problems just tracking and understanding the code. So I will have to google and learn up how to try and call your code and read up on the links you posted thank you for your time and help.

  • Robert Nyman says:

    JamesM,

    No problem, I hope my answer helps you out.

  • Tim says:

    I am trying this out and it seems to work great. One issue I am having though is when using fullscreen video mode. It works fine if you have the newest Flash player installed, but I also need it to work with all players 9.0.28 or later. I know you can specify version number, but can I specify 9.0.28 instead of just 9? If so, how would I go about that?

  • Robert Nyman says:

    Tim,

    Hmm. I haven't tested, but I think you could send in your value as a decimal. I.e., instead of this:

    <code>FlashReplace.replace("da-cool-header", "/flash/cool-header.swf", "flash-element-id", 600, 350, 7);</code>

    you should be able do to it like this:

    <code>FlashReplace.replace("da-cool-header", "/flash/cool-header.swf", "flash-element-id", 600, 350, 9.0.28);</code>

    or

    <code>FlashReplace.replace("da-cool-header", "/flash/cool-header.swf", "flash-element-id", 600, 350, "9.0.28");</code>

  • Tim says:

    Thanks. It worked when I passed the value with a comma and quotes. (ie- "9,0,28,0") However, turns out that wasn't my problem. Fullscreen mode only works if you have wmode set to "window". I had "transparent".

    Apparently the newest version of the Flash player (9.0.115) supports fullscreen and transparent, but the older versions (9.0.28+) do not. Hence, why I got it too work in my browser, but not in some others.

  • Robert Nyman says:

    Tim,

    Ah, intereresting. Good to hear that it worked out!

  • Does anyone know if the flash file that is being loaded will be available through the browsers cache after a first inital load?

    Or does this method prevent caching because of the way the flash file is loaded?

    Anyone has any clue on this? ;)

    Best regards,

    Peter

  • Robert Nyman says:

    Peter,

    Good question. My estimate is that it will be cached, even though it's put in the page via script, but I don't have any facts to support that claim.

  • James says:

    I am trying to use FlashReplace rather than the bloated copy of

    SWFObject now the below works just fine in FF fox but does not seem to work well in IE

    You Can see the code that I have been using here

    http://pastebin.com/f35af2725

    The SWF file is displayed correctly but I do not think I am passing the correct parameters that the file needs for this flash application.

    The 3 other examples are how you would use SWFObject would it be possible if you could show me how to change the examples that are shown in SWFObject to be used in Flashreplace ? or to give me a few hints as my programming skills are very poor

  • Robert Nyman says:

    James,

    I took a quick look at your examples, and as far as I can see, you add the parameters correctly (just as you would with the other examples as well).

    Not sure what <code>mssHolder</code> refers to in the UFO examples, otherwise, you'd add parameters the same way with those examples.

  • James says:

    Thanks Robert I changed the path to be relative and it seems to have done the trick I will see if I can get the Dev of SWF file to move to your script as it seems to be much faster than SWFObject thank you for your hint.

  • Robert Nyman says:

    James,

    I'm glad to hear that it works!

    Good luck!

  • M.A. says:

    Great piece of code, I like it!

    You could insert an optional parameter with the html code to be shown if flash isn't installed or if is it's blocked on the client…

  • Robert Nyman says:

    M.A.,

    Thank you! However, you should always have the HTML fallback (if JavaScript and/or Flash isn’t available) in the HTML code to begin with, and then use the script to replace it.

  • rev says:

    Ok guys, sorry but this code is not good. It doesn't work properly in IE 7. In IE7 it shows a blank broken link box before it loads the next SWF AND all the code is way over complicated. Delete that FlashReplace.js and just use this code and it will work in all browsers no issue.

    Never forget, KISS! Keep it simple.

    if (document.embeds['flashobject'])

    {

    document.embeds['flashobject'].LoadMovie(0, 'whatever.swf');

    }

    else

    {

    document.getElementById('flashobject').movie

    = 'whatever.swf';

    }

  • Robert Nyman says:

    rev,

    If you encounter a black box, it seems like you're not applying it correctly. Also, I'd prefer some constructive criticism instead of you just pimping your own approach.

    Your solution doesn't support a fallback for non-JavaScript support, non-Flash support or accessibility or search engines. Quite important in my book.

    With that said, of course you should use whatever code you seem fit your needs best. That's why there are a number of JavaScript libraries out there, where no solution is never the ultimate one for all thinkable scenarios.

  • Andreas says:

    As always great work. Know I'm kind of late but hadn't seen this before and just reduced JS-size with 20k after replacing SWFObject with FlashReplace. Sweet.

  • Robert Nyman says:

    Andreas,

    Thanks! Good to hear that it worked well for you!

  • Ryan says:

    any ideas on how to trigger this with onClick?

    thanks

  • Robert Nyman says:

    Ryan,

    You could put the code in a function, e.g:

    <code>function insertFlash () {

    FlashReplace.replace("flash-content", "/flash/my-movie.swf", "flash-element-id", 800, 200);

    }</code>

    and then just call the insertFlash function when the onclick event occurs.

  • Ryan says:

    thx for the fast response!

    when i onClick it tries to execute the function but then just loads whatever video i have there in the first place.

    the first video is loaded thru html as your example above.

    other videos are loaded in its place by clicking the thumbnail.

    but when i click the thumbnail, the original just loads again. do i need to change the objectid?

    here's my function:

    <code>

    function loadVideo(src,width,height,divid,movieid)

    {

    FlashReplace.replace(divid, src, movieid, width, height, 7, {allowFullScreen:'true', quality:'high', bgcolor:'#000000', scale:'noscale'});

    }

    </code>

    ps nice script!

  • Robert Nyman says:

    Ryan,

    Hard to say, but the code looks right. The way the function works is that it replaces the innerHTML of the div you specify with the new value, so theoretically, it should work (although I understand this doesn't help you much).

    Look for any JavaScript errors and similar things.

  • Ryan says:

    yur right its working great now. my script that writes the onClick tags for each thumb was calling the same clip for all thumbs.

    idiotic typo on my part.

    i actually used href="javascript:loadVideo(.. for a smoother load instead of onClick (no page bouncing)

    thanks for the help!

  • Robert Nyman says:

    Ryan,

    Good to hear that it works! :-)

  • gary says:

    Having problems passing params into the FlashReplace.replace call …

    Trying to add this to the end of the standard args –

    FlashReplace.replace("frontpageimg", jsonImgData.images[counter].loc, "flashasset", 723, 250, {allowscriptaccess: 'always', loop: 'false'});

    Once I add the params, as above, this stops working in FF or IE.

    Without the params, this works as needed in FF; but – surprise – in IE 7, my ExternalInterface.call throws a null. I was using SWF and got around the null bull when adding allowscriptaccess … (?)

    I've tried allowScriptAccess, as well …

    Any ideas ?

  • Robert Nyman says:

    gary,

    Hmm… Weird. The way params work with FlashReplace is that they're added as <code>param</code> objects in IE and as attributes on the <code>embed</code> object for other web browsers, resulting in HTML that should work (and if you use Firebug, you can easily view the actual generated HTML).

    Looking at Adobe's documentation, and this is a long shot, but they spell it <code>AllowScriptAccess</code>.

  • gary says:

    Wow.

    So … However I was getting around the error, it was *all my own* doing in the first place. ;)

    (Turns out, one should pay attention when using ExternalInterface from a Flash file …)

    Thanks for the code, for your time –

    gary

  • Robert Nyman says:

    gary,

    No worries. :-)

    Thank you for using FlashReplace!

  • bakkelun says:

    Hey Mistah! Back to tell you that this works like a charm, tested in all major browsers (also the sucky ones). Check it out here:

    http://www.dosspirit.net/moduler/flashplayer/play

    Wohey!

  • Robert Nyman says:

    bakkelun,

    Good to hear! :-)

  • Erin Alicia says:

    Most excellent resource, amazed that even I could get it to cook (left/right brain thing).

    Thank you greatly for sharing your knowledge, this code rocks and now I believe I might be on my way to full compliance thanks to you.

    Peace,

    Erin

  • Robert Nyman says:

    Erin,

    Great! Good luck!

  • Raza says:

    Always refreshing to see honest effort.

    I was wondering if its a good practice to use percentage (%) for the height and width parameters.

    Is this supported by FlashReplace?

  • Robert Nyman says:

    Raza,

    Thanks. And yes, you can use percentage values as well!

  • Robert,

    Than you for the handy script. It got me over the IE hurdle. Updating the script to produce XHTML was a cinch.

  • Erik says:

    After installing Flash player 10 beta, this excellent flash replacement script stopped working.

    Adding a space before the parentheses in the regular expression that checks for the version did the trick.

    So, "/.*(d+.d+).*/" should be "/.* (d+.d+).*/"

    .* was too greedy it seems.

  • JohnM says:

    Very VERY cool…. Thank you…

    You have given me a way to EASILY load a different flash movie depending on visitor interaction with my site.

    Also a way to present a javascript managed 'Loading..' message while waiting for the movies to load.

    As well as a way to check if the browser can handle the flash object and cleanly and simply render an html option to screen if it can't.

    Again, very cool and simple implementation.

    Kudos to you…

    :-)

  • Robert Nyman says:

    Jeffrey,

    Great!

    Erik,

    Interesting. Does it still work with older versions with that fix? Either way, I think I'll wait with a fix till version 10 is finally released.

    JohnM,

    Thanks, I'm glad that it was a good fit for you!

  • Erik says:

    Works fine with older versions as far as the tests on various computers at work that I have done.

  • Robert Nyman says:

    Erik,

    You seem to be absolutely correct. It was just such a small fox, so I issued a new release. Please download FlashReplace 1.10 and let me know how it works for you.

  • I use your script with great effect loading after onload.
    in conjunction with simon wilsons .addLoadEvent

    I then just put your call just above the div tag (for readability)

    I did this because I had some large flash movies loading and they were slowing the initial display time of my page.

  • Robert Nyman says:

    johnnyboyNiumata,

    I see! Good to hear that it's working out for you!

  • Stefan says:

    I don't get the script running. Please take a lot over here and tell me, if you have any ideas!
    http://www.rosesfashionoutlet.com/b2c/index_nofla

  • Robert Nyman says:

    Stefan,

    To be more correct, the id of the element should be the element where you want to replace the inner content with the Flash movie. I.e. wrap your image with a div or span element, give id your desired id, and it should work just fine.

  • Ryan says:

    hey i had a big problem with flashreplace on my sites after upgrading to flash 10. the 'checkForFlash' function doesn't seem to identify flash 10. can u verify and/or provide a code update? thanks!

  • Robert Nyman says:

    Ryan,

    Please download the latest version and you should be good to go. :-)

  • Ryan says:

    hmm still bad in FF3.03 with Flash 10.0 r12. one of my developers had the problem in FF3 with Flash 10 on Ubuntu also.

    i read elsewhere that its a problem detecting version 10 in mozilla browsers. for now disabling the check version call fixed it, but that's just a hack.

    i guess this will be a larger problem for you when more users switch to Flash 10. you could see large outtages. i only had a few users notice the problem on my sites..

  • Red says:

    Very nice solution,

    I have tested with:

    IE: 5.5, 6, 7, 8 Beta 2

    Safari: 3.1.2

    Opera: 9.6.2

    Chrome: 0.3.154.9

    Firefox 3.0.4 (Windows and Linux)

    Works nicely on all!

    Many thanks.

  • Robert Nyman says:

    Ryan,

    Not sure why that would be.

    Red,

    Thanks, good to hear!

  • Prasannah says:

    Sounds interesting. I'm currently using the ToobPlayer to play Youtube videos on my WordPress site. It uses a simple <embed> tag and passes the URL of the video through <code>flashVars</code>. Any idea on how to use FlashReplace to display the videos? If you'd want, I can post the embed code (its pretty simple yet I can't figure out how to emply FlashReplace)! Thanks in advance!

  • Jeff says:

    Robert,

    Excellent code. Short and very easy to follow.

    I hate to kick a dead horse, but I want to bring up the IE7/image placeholder issue one more time. I've had the same problem as described by Clarence Eddy and James. I'm testing with a very simple swf with a preloader and I get this problem. Firefox works fine.

    To solve it, I removed: data="' + src + '"'

    replacing it with a single quote to close classid.

    Thanks for responding to feedback a year and half after posting the code.

  • Robert Nyman says:

    Jeff,

    Thank you!

    If that works for IE 7, great! At the time, I won't tweak the script, mostly due to lack of time, but please just adjust the script so it works fine for you.

  • [...] Nyman hat mit FlashReplace einen sehr kompakten Ansatz als Alternative veröffentlicht. Das Skript hat 2 KB und ist sehr [...]

  • [...] FlashReplace — Script très léger pour insérer une animation Flash dans votre page web avec une seul ligne de code : [...]

  • nyamsprod says:

    I like your script it's very effective. I had similar complaints as yours about swfobject but was too lazy to come up with a clear solution and thanks to your solution my somewhat lazyness was clearly justified… somehow :).

    I have one question thought, why don't you submit all FlashReplace parameters using an object ?

    One of the problem that I had with other solutions was the number and the order of the parameters to submit. I usually think that to remove doubt and uncertainty, if a function, no matter what language you code in, should take more than 3 variables it's better to give that function an object (or an associative array in PHP for example) so that parameters are better understood and less forgotten by the user.

    What do you think of that ?

  • Robert Nyman says:

    nyamsprod,

    Glad you like it! :-)

    It is indeed a good idea to have it as an object, but due to time and other obligations, I'm not looking into adding such functionality at the moment.

  • Jim Prokovski says:

    I've made a small research in the net about adding flash with javascript and I think that you scrip is better then more of the other.

    The other think I found and I think it is very well written and with perfect structure is this class

    http://blog.aip-solutions.com/11/include-flash-co

    bye

  • Kyle Simpson says:

    I think one of the most important things to consider is the end-user's user experience. One important thing with flash embedding is providing some sort of graceful handling when the flash plugin version is not up to snuff for that user.

    Adobe's express-install process is great for this, if leveraged correctly. Libraries like SWFObject (and my own, http://checkplayer.flensed.com<a&gt;) seek spe…

  • Robert Nyman says:

    Kyle,

    In regards to fallback content, FlashReplace handles it just the same way as SWFObject. In terms of express-install, my personal opinion is that I prefer not pushing it onto users and scaring them with dialogs, but rather just offer the alternate content instead.

  • bakkelun says:

    Back with a tip: http://www.flashreplace.com is available, you should register it to brand this very excellent script even more.

    – bakkelun

  • Hemanth says:

    This is great code. Thanks for it.

    I've implemented it.. and it works fine.

    I created a SWF file (say techDoc.swf) and embedded in html(say info.html). In this html file, i have a javascript function. I want to make a call from SWF file to this javascript function which resides in info.html.

    Is it possible. bcoz I've tried it using ExternalInterface. but not able to :(..

    looking fwd for some ideas.. plz..

    Thanks,

    Hemanth

  • Robert Nyman says:

    bakkelun,

    Thanks for the tip. :-)

    Hemanth,

    Glad that it works for you! About getting the scripting with the web page to work, I recommend looking around the Adobe web site for information on that.

  • [...] FlashReplace — Script très léger pour insérer une animation Flash dans votre page web avec une seul ligne de code : [...]

  • Roberto F says:

    Hey Robert, thanks a lot for your script.
    I was able to install everything but when I open the page, the flash movie starts automatically and I was hoping I would use the image as a button to play the movie. Am I doing something wrong here?

  • Roberto F says:

    I’m not sure if you got the URL where my flash movie is.

    http://www.solidgroundentertainmentworldwide.com/test/_template.html

    Thanks

    Roberto

  • Robert Nyman says:

    Roberto,

    You’re welcome!
    All this script does is insert the Flash movie into the web page. Controlling it is beyond the scope of this script.

  • dave says:

    So I think I am being a little dense,

    As a test case just tried to get FlashReplace to show a swf before using it in my project.

    I coded http://pastebin.com/me85bff9 with FlashReplace.js & ?004310.swf in the apache root dir (its only a test) but no movie …

    Checked, double checked but no go, any idea ? Its been a long day so may be something stupid … lol

  • Robert Nyman says:

    dave,

    The first parameter in the call is the id of the HTML element where you want to put the Flash movie. You have no HTML element with such an id in your code.

  • dave says:

    Jep correct, after a couple of hours of playing & zip, the penny drops after asking for help :0

    Cheers

    Dave

  • dave says:

    Works a treat, now integrated into my project for playing back .swf video archives http://kmotion.eu/mediawiki/index.php/Kmotion_v2

  • Rob says:

    I can’t get this to work in FireFox. I am using version 3.5.5 on a Win XP machine.

    Rob

  • Rob says:

    Oops. version was set to 8. I changed it to 9 and it works now. :D

    Rob

  • Robert Nyman says:

    dave,

    Nice!

    Rob,

    Glad it worked out!

  • yossef says:

    That's works only with IE ?!!

    not with Chrome and FF !

    i mised something ?

  • Robert Nyman says:

    yossef,

    No, it should work with any web browser.

  • bakkelun says:

    Hi, I’m back again wondering abit on how you can mimic SWFobject’s “setParam”? I’m trying to use JWPlayer (www.longtailvideo.com), and from the setup wizard example, to allow fullscreen one needs this:

    EXAMPLE from http://www.longtailvideo.com/support/jw-player-setup-wizard

    —- SCRIPT START —-
    var so = new SWFObject(‘player.swf’,’mpl’,’320′,’240′,’9′);
    so.addParam(‘allowfullscreen’,’true’);
    so.addParam(‘allowscriptaccess’,’always’);
    so.addParam(‘wmode’,’opaque’);
    so.addVariable(‘author’,’The DOS Spirit’);
    so.addVariable(‘file’,’http://content.longtailvideo.com/videos/flvplayer.flv’);
    so.addVariable(‘title’,’The DOS Spirit Retro Video Player’);
    so.write(‘mediaspace’);

    — SCRIPT END —-

    The variables are easy, you can pass them as you stated in the example, but how do I add the so.Param(‘allowfullscreen’,’true)?

    I tried

    FlashReplace.replace(“player”,”player-viral.swf?file=Inherit the earth – quest for the orb.flv”,”player”,320,240, {‘allowfullscreen':true});

    but to no luck. Any help? Live example is here: http://dosspirit.net/filer/video/

  • Robert Nyman says:

    bakkelun,

    I'm sorry, I don't know why doesn't work. If you look at the FlashReplace code, it explicitly adds params for those values you send in.

    From there on, I have no idea why it wouldn't work. Good luck!

  • bakkelun says:

    Ok, I found it out.

    It seems that if you want spesific parameters (not variables), you have to first state the flash version, then use {} like this:

    FlashReplace.replace("player","player-viral.swf?playlistfile=videoplaylist.php&file=Inherit the earth – quest for the orb.flv","player",320,500,9,{'allowfullscreen':true});

    If one skips that flash version parameter (9), it won't work. Just a heads-up!

  • Robert Nyman says:

    bakkelun,

    Glad that it worked out for you! :-)

  • Do you know if FlashReplace causes some kind of memory issue with IE6?

    I have used it to embed some flash on my home page http://snow.byethost8.com/ which works great, but when I go in to the website by clicking the skier my accordion menu animation runs really slowly, like there is some kind of conflict.

    If I just go straight to the ski page, bypassing the flash page http://snow.byethost8.com/Ski the accordion men runs quickly and smoothly.

    Any ideas why this could be happening?

    If I use the standard HTML generated by flash to embed, the accordion runs smoothly which suggests to me it is FlashReplace that is causing a problem rather than the flash movie itself.

    Thanks for a great lightweight solution to embeding flash though!

  • Robert Nyman says:

    Damian,

    Not that I know of. Basically, all it does is inserting the the Flash to the page with HTML for it. What you could do is use Firebug or similar tool to compare the inserted HTML to your standard HTML and see if you can spot any difference that could possible matter.

  • [...] FlashReplace – Insérer du Flash proprement. [...]

  • Eeexcelleeent *rolls fingers*

  • Mac Liems says:

    Fantastic! This was exactly what I needed.

    I have a problem, though, that has nothing to do with your script:

    I am building an exercises application, using swfs for Greek input and Javascript for the logic. Now, after each interaction I would like to have the input field in the swf to have focus. This is done in the swf with input.setFocus() on every change event and that works fine. However, the swf in the page loses focus, so this is not very helpful. Nor does it make a difference when I additionally set focus with Javascript: document.getElementById('flash-id').focus();

    Do you have any ideas on this?

  • Mark P says:

    Hi Robert, I've used your code for years and even built your checkForFlash() function into a plugin for jQuery. It's been great! Thank you.

    I think I've found a problem with a new type of browser though. The Android mobile browser always returns a false from checkForFlash(). I tested using the Android SDK and created a platform using the latest Android versions. The emulator always gave a false. The same happened when I tested on a mate's Android phone.

    I'll be running some other tests focused on this problem over the next few days, so maybe I'll have more to go on then.

  • Mark P says:

    After investigating further into Android and Flash, it appear that you need to install the Flash plugin from the 'Android Market'.

    The problem is, the emulator cannot access the market. To test a Flash App on the Android browser, you have to actually buy an Android Phone. Next time I see my mate, I'll ask if he installed the plugin… I think he had, but I'd have to check again to be certain.

  • Robert Nyman says:

    Mac,

    Thank you!

    And I'm sorry, but I don't know how to solve your problem.

    Mark P,

    Interesting. Thanks for letting me know!

  • plancton says:

    Hello,
    I suggest to you this improvement for FlashReplace :

    Today : If the visitor has no javascript or no swf activated the content inside the div is delivered. OK but :
    Problem : if you want to put an alternative image instead of flash, it will increase the weight of the page for nothing
    Better : if you put the content in the div inside noscript tags , it will only appear if js is deactivated and for people who have js but no flash you should add this line inside the library :

    if(this.elmToReplace && this.flashIsInstalled){
    ……
    }
    else this.elmToReplace.innerHTML = this.elmToReplace.innerHTML.replace(/noscript/gi, "div");

    What do you think of this ?
    Thank you

  • Robert Nyman says:

    plancton,

    Thanks for the tip.
    While I see your point, I’d argue that the image is good nevertheless since it will be indexed by search engines and such.

    Also, the noscript element is not a solid way to determine JavaScript support. JavaScript could be enabled, but then some firewall, proxy, antivirus software etc might block it/clean the content of the JavaScript file.

    To add, I don’t really maintain FlashReplace anymore, but feel free to use your approach if you deem it more suitable.

    And thanks for the input!

  • [...] Now there’s a third viable option for embedding Flash using JavaScript. It’s called FlashReplace and was written by Robert Nyman.The unique feature of FlashReplace is its size. Compared to [...]

  • [...] FlashReplace – Insérer du Flash proprement. [...]

  • Joy says:

    Good Day, For me this partly works but doesnt quite resolve my specific issues. I am glad to have found your site with lots of insights I can def use in the future.

    For this particular flash ipad issue I would totally love your help. I have tried two different method you showed. both the code html and I must be missing something. I checked the end results on ipadpreview.com and i get it to work intermittent. I have to click on a nav link then go to home and I will see it work. If I refresh the page then I would have to do same routine above to see it work in ipad simulator.

    Please advise as this would be a fix for me for life if i can get this to work.

    Thanks in advance,

    joy

  • Robert Nyman says:

    Joy,

    Not sure what the problem might be. Please try SWFObject and see if it works out for you.

  • Oh my goodness! Awesome article dude! Thank you so much, However
    I am going through issues with your RSS. I don’t know the reason why I am unable to join it. Is there anyone else having similar RSS issues? Anybody who knows the answer can you kindly respond? Thanx!!

  • site says:

    ‘ After graduating from college, Einstein failed to locate a job associated with his field, physics.
    Regardless of be it workplace politics deciding who gets that increase you’re seeking metropolis politics determining where by you
    are eligible to park downtown county politics dictating your quarterly property tax
    and even nationwide politics determining how your colleges are funded, politics plays an important part
    inside your everyday life. If it won’t feel completely secure,
    use bobby pins to connect it to hair.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>