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
FlashReplaceis only 1.8 kb 2.1 kb.
- Neither of them created standards-compliant code;
FlashReplacedoes. Not anymore. Now it creates an additionalembedelement for maximum compatibility - Several lines are needed to insert a Flash Movie.
FlashReplaceonly 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
idof the HTML element where you want to replace the content with the Flash movie. src- The path to the Flash movie (i.e. the
swffile). 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
defaultFlashVersionproperty of theFlashReplaceobject 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!
159 Comments
April 19th, 2007 at 19:26
Can't wait to try this one out!
April 19th, 2007 at 21:12
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.
April 19th, 2007 at 22:05
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.
April 20th, 2007 at 0:54
[...] eres usuario SWFObject, te gustará FlashReplace. Archivado en: Flash javascript minipost programación [...]
April 20th, 2007 at 2:12
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.
April 20th, 2007 at 3:39
@Harmen
Yeah I forgot about that HTML thing!
April 20th, 2007 at 8:26
[...] 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 [...]
April 20th, 2007 at 11:10
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!
April 20th, 2007 at 12:30
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.
April 20th, 2007 at 13:02
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.
April 20th, 2007 at 14:56
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 ?
April 20th, 2007 at 16:13
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.
April 21st, 2007 at 8:22
[...] 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) [...]
April 22nd, 2007 at 12:44
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)
April 22nd, 2007 at 15:17
[...] 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 [...]
April 23rd, 2007 at 12:01
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.
April 25th, 2007 at 1:52
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.
April 25th, 2007 at 11:20
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.
April 26th, 2007 at 11:42
[...] alternative solution to this problem is my FlashReplace [...]
April 27th, 2007 at 5:26
[...] 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) [...]
April 27th, 2007 at 10:00
How do you pass FlashVars to the loaded SWF? The "old way", by url encoding them and adding after filename.swf?
April 27th, 2007 at 10:40
In IE, FlashReplace shows a broken image while the Flash object downloads. It works as expected in FireFox. Any workarounds?
April 27th, 2007 at 12:16
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.
May 1st, 2007 at 7:53
[...] Robert Nyman has released FlashReplace, a lightweight JavaScript embed similar to SWFObject and UFO [...]
May 1st, 2007 at 20:23
Wow! Big job. And a small file size
I'll try it now!!!
May 2nd, 2007 at 10:56
Renato,
Enjoy!
May 2nd, 2007 at 19:30
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
May 3rd, 2007 at 11:05
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.
May 3rd, 2007 at 15:20
Nice! I'll try it out as soon I get some spare time and return back with more feedback
May 16th, 2007 at 17:39
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?
May 16th, 2007 at 22:17
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">
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");
June 3rd, 2007 at 11:55
I use runfoo instead of the other javascript mentioned above. It is only 1.89 kb and easy to implement. Give it a try…
June 3rd, 2007 at 22:41
shane,
Which runfoo would that be? And, what with runfoo do you find easier to implement compared to FlashReplace?
July 16th, 2007 at 18:41
freakin' awesome dude, well done on writing some kick ass code!!!
September 13th, 2007 at 19:11
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.
September 13th, 2007 at 20:00
Follow up to the i.e7 problem … taking out the
<code>((window.ActiveXObject)? ' id="' + id +</code>
sorts it out… but what does it break…?
September 13th, 2007 at 20:23
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
ActiveXObjectis there since IE seemed to need a certainclassidto properly render, and thesrcfor 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.October 1st, 2007 at 22:54
[...] 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 [...]
October 12th, 2007 at 19:10
Could you post a full example of how to use it?
October 16th, 2007 at 13:34
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.
October 19th, 2007 at 18:07
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.
October 22nd, 2007 at 14:38
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?
October 22nd, 2007 at 15:21
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>
October 22nd, 2007 at 15:41
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!
October 22nd, 2007 at 17:52
Rich,
Good to hear! Good luck!
November 14th, 2007 at 13:13
new favourite, thanks!
November 29th, 2007 at 23:19
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
November 30th, 2007 at 10:38
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.
November 30th, 2007 at 20:57
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 
i was changing only at div id, and not in the “FlashReplace.replace(“flash-content“” too…
thanks anyway for your reply…i appreciate it.
December 2nd, 2007 at 23:20
Robert Cazan,
Greeat to hear! Good luck with things now!
December 24th, 2007 at 3:21
hello again.
I'm still working on my website, though Christmas is coming
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
December 25th, 2007 at 22:40
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.
December 27th, 2007 at 16:23
[...] Now there’s a third viable option for embedding Flash using JavaScript. It’s called FlashReplace and was written by Robert [...]
December 29th, 2007 at 0:24
[...] FlashReplace – A light-weight JavaScript to insert Flash movies into your web page – Robert’s talk (tags: flash javascript embed code webdev) [...]
December 29th, 2007 at 7:30
Does this script add Wmode=Transparent as default? It's very needed in my work environment, that's why I ask.
sincerely,
-bakkelun
December 29th, 2007 at 20:34
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>
January 5th, 2008 at 14:08
Thanks a lot, the script works fine and is very useful! I had it running in less then 2 minutes.
January 7th, 2008 at 10:48
Marc,
Great!
January 12th, 2008 at 15:34
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);
January 14th, 2008 at 10:37
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.
January 15th, 2008 at 0:40
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.
January 15th, 2008 at 0:43
JamesM,
No problem, I hope my answer helps you out.
February 4th, 2008 at 23:18
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?
February 5th, 2008 at 11:59
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>
February 6th, 2008 at 0:13
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.
February 6th, 2008 at 12:09
Tim,
Ah, intereresting. Good to hear that it worked out!
February 7th, 2008 at 18:10
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
February 7th, 2008 at 19:10
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.
February 17th, 2008 at 11:07
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
February 18th, 2008 at 11:52
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.
February 18th, 2008 at 14:13
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.
February 18th, 2008 at 14:46
James,
I'm glad to hear that it works!
Good luck!
March 1st, 2008 at 21:39
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…
March 3rd, 2008 at 8:57
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.
March 7th, 2008 at 20:39
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';
}
March 7th, 2008 at 21:03
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.
April 9th, 2008 at 16:45
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.
April 9th, 2008 at 20:47
Andreas,
Thanks! Good to hear that it worked well for you!
May 27th, 2008 at 16:30
[...] An alternative suggested solution is using FlashReplace. [...]
May 28th, 2008 at 14:55
any ideas on how to trigger this with onClick?
thanks
May 28th, 2008 at 14:59
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.
May 28th, 2008 at 17:14
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!
May 28th, 2008 at 17:53
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.
May 28th, 2008 at 18:14
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!
May 28th, 2008 at 18:33
Ryan,
Good to hear that it works!
May 28th, 2008 at 19:08
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 ?
May 28th, 2008 at 21:28
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>.
May 28th, 2008 at 23:42
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
May 29th, 2008 at 0:11
gary,
No worries.
Thank you for using FlashReplace!
June 11th, 2008 at 15:34
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!
June 11th, 2008 at 16:18
Use this URL instead, enjoy =)
http://www.dosspirit.net/moduler/flashplayer/
June 11th, 2008 at 16:22
bakkelun,
Good to hear!
June 21st, 2008 at 3:26
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
June 22nd, 2008 at 21:28
Erin,
Great! Good luck!
June 26th, 2008 at 15:04
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?
June 26th, 2008 at 20:56
Raza,
Thanks. And yes, you can use percentage values as well!
July 15th, 2008 at 23:42
Robert,
Than you for the handy script. It got me over the IE hurdle. Updating the script to produce XHTML was a cinch.
July 17th, 2008 at 13:35
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.
August 26th, 2008 at 22:13
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…
August 27th, 2008 at 13:01
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!
August 27th, 2008 at 13:24
Works fine with older versions as far as the tests on various computers at work that I have done.
August 27th, 2008 at 13:37
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.
September 23rd, 2008 at 15:13
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.
September 23rd, 2008 at 21:50
johnnyboyNiumata,
I see! Good to hear that it's working out for you!
October 29th, 2008 at 19:25
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…
October 29th, 2008 at 19:51
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.
November 6th, 2008 at 21:10
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!
November 6th, 2008 at 23:33
Ryan,
Please download the latest version and you should be good to go.
November 7th, 2008 at 3:59
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..
November 15th, 2008 at 22:22
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.
November 16th, 2008 at 0:40
Ryan,
Not sure why that would be.
Red,
Thanks, good to hear!
November 23rd, 2008 at 7:03
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!
November 24th, 2008 at 21:07
Prasannah,
There’s a suggestion in the comments above.
November 30th, 2008 at 10:38
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.
November 30th, 2008 at 23:53
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.
December 1st, 2008 at 22:28
[...] Nyman hat mit FlashReplace einen sehr kompakten Ansatz als Alternative veröffentlicht. Das Skript hat 2 KB und ist sehr [...]
December 14th, 2008 at 0:28
[...] FlashReplace — Script très léger pour insérer une animation Flash dans votre page web avec une seul ligne de code : [...]
January 28th, 2009 at 9:39
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 ?
January 28th, 2009 at 10:22
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.
February 7th, 2009 at 1:46
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
February 8th, 2009 at 23:40
Jim,
Cool, thanks!
February 11th, 2009 at 4:41
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>
seek spe…
February 11th, 2009 at 10:22
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.
April 5th, 2009 at 19:47
Back with a tip: http://www.flashreplace.com is available, you should register it to brand this very excellent script even more.
- bakkelun
June 17th, 2009 at 11:36
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
June 17th, 2009 at 12:22
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.
August 3rd, 2009 at 5:40
[...] FlashReplace — Script très léger pour insérer une animation Flash dans votre page web avec une seul ligne de code : [...]
September 29th, 2009 at 2:46
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?
September 29th, 2009 at 3:02
I’m not sure if you got the URL where my flash movie is.
http://www.solidgroundentertainmentworldwide.com/test/_template.html
Thanks
Roberto
September 29th, 2009 at 8:37
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.
October 7th, 2009 at 17:06
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
October 7th, 2009 at 17:10
dave,
The first parameter in the call is the
idof the HTML element where you want to put the Flash movie. You have no HTML element with such anidin your code.October 7th, 2009 at 17:37
Jep correct, after a couple of hours of playing & zip, the penny drops after asking for help :0
Cheers
Dave
October 11th, 2009 at 1:21
Works a treat, now integrated into my project for playing back .swf video archives http://kmotion.eu/mediawiki/index.php/Kmotion_v2
December 2nd, 2009 at 20:30
I can’t get this to work in FireFox. I am using version 3.5.5 on a Win XP machine.
Rob
December 2nd, 2009 at 22:59
Oops. version was set to 8. I changed it to 9 and it works now.
Rob
December 3rd, 2009 at 15:08
dave,
Nice!
Rob,
Glad it worked out!
December 5th, 2009 at 8:16
[...] FlashReplace — Script très léger pour insérer une animation Flash dans votre page web avec une seul ligne de code : [...]
December 16th, 2009 at 9:30
[...] FlashReplace [...]
January 19th, 2010 at 14:15
That's works only with IE ?!!
not with Chrome and FF !
i mised something ?
January 19th, 2010 at 17:12
yossef,
No, it should work with any web browser.
January 30th, 2010 at 0:24
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/
January 30th, 2010 at 2:35
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!
January 31st, 2010 at 6:22
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!
January 31st, 2010 at 21:23
bakkelun,
Glad that it worked out for you!
May 5th, 2010 at 16:15
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!
May 5th, 2010 at 17:23
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.
May 25th, 2010 at 4:42
[...] FlashReplace – Insérer du Flash proprement. [...]
June 30th, 2010 at 16:52
Eeexcelleeent *rolls fingers*
August 6th, 2010 at 20:17
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?
August 9th, 2010 at 10:48
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.
August 13th, 2010 at 10:16
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.
August 16th, 2010 at 0:34
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!
February 3rd, 2011 at 15:55
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
February 3rd, 2011 at 16:36
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!
March 31st, 2011 at 2:38
[...] 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 [...]
November 28th, 2011 at 19:46
[...] FlashReplace – Insérer du Flash proprement. [...]
April 10th, 2012 at 23:13
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
April 13th, 2012 at 12:35
Joy,
Not sure what the problem might be. Please try SWFObject and see if it works out for you.
Write a comment