Firefox2 - not displaying swf/flv in iframe

Page: 1

Author Post
m3mph1s
Guest
I've just (sort of) launched a site for a client where after a week of battling other ridiculous Lightbox clones, I finally found and implemented Floatbox to display image sets and a couple iframes containing SWFs of flash video on the media page. I tested it on 3 different computers and 6 browsers and everything worked without a hitch except now I realised that in FF2, the images load fine, but the video just doesn't load. I put up low res and high res versions of the video, and neither works... I let it sit for like 20 minutes to see if it was just slow, but still nothing. All I get is the blank black box. (see screenshot) I disabled the other javascript that I'm running on the page, and that didn't make a difference either. I tried placing "type:iframe" in the rev tag and that also didn't help... I'm sure I've just made a mistake but I can't seem to spot it. Any help is appreciated.

Thanks.

Screenshot from Firefox 2: here

Link to the live page: here
« Last edit by Unknown on Fri Sep 05, 2008 9:57 am. »
Administrator
Registered: Aug 2008
Posts: 3382
Your screen-shot is exactly what I get in FF2 as well - so it's not just you. I assume our experiences are also consistent in that the flash samples on my demo page work fine in FF2. So there's something particular about your flash files. If you have no objections and don't mind the effort, I would appreciate it if you could send me the flash files involved (just lo-rez) so I can explore the issue on my test server. There's the obvious .swf file but I think there is at least a seperate .flv involved as well. I would like to try some different experiments to see what circumstances cause FF2 to not display this flash.

As a workaround, you could look at using flowplayer to show the flvs. The flowplayer docs are heavily focussed on using javascript to instantiate and control the flash, but it works just fine passing the required parameters as querystring parameters. See the source of the "Flash in a Frame" sample on my demo page. Flowplayer is used in that sample.

If you do want to share your swf/flv files, probably the easiest would be to put a zip on your site somewhere and let me know the URL to it - either here or through my contact page. Or I can send you an email address if you prefer.

By the way, that's a very classy looking site you've got.
m3mph1s
Guest
Yeah, the flash samples on your page work fine for me as well, so I think that it's fair to say that it's the files. If we can figure out a way to make it work with what I already have in place then that would be my preference, but if not then I can switch it up to a different flash player...but my money is betting on a silly mistake made by me.

All it is really is the video that plays so I don't mind linking it: here

And thanks, I'm really happy with the way the site has turned out and excited to have it launched since I think it's my best project yet- and Floatbox is a perfect addition.
Administrator
Registered: Aug 2008
Posts: 3382
It looks to be a pathing problem. Under FF2 it seems the swf object is looking for its content in the same folder as the top document. Under all other browsers, it seems to find the content just fine.

The config that worked in my tests was:
1) move the required files out of the video sub-folder into the main content folder (sorry)
2) load it directly as flash, rather than going through the iframe html (href="jetdemoLO.swf" instead of href="demolo.html").

I hope you have the same luck I did.
m3mph1s
Guest
Hmm... the thing of it is, the only reason I'm even using an iframe is because I find that if I just link directly to the flash, a problem occurs when someone views the page without javascript or if they click on the video before the floatbox loads- they just see the flash file fullscreen- which really doesn't work with the way I'm wanting to display it, so I think I kind of need to make it work in an iframe.

I've been toying with it, and I think you may be right that it is some kind of a pathing problem, but I did find a couple notable things:

- If I navigate directly to the page 'demolo.html' sidestepping the link and floatbox, then it loads everything and plays just fine- which makes it seem like it is in fact finding the file, it just isn't set up properly in the linking...?

- Also I tested switching the demo reel with an auto-starting SWF that wasn't displaying an FLV, and when it came up in the floatbox, it played the sound from the file, but just didn't show the visuals, which makes me think that it is finding the file okay, but somehow won't display it- I don't know if that changes things at all...

Click here to see the page with an auto-starting SWF swapped for the low bandwidth reel to see what I mean.
Administrator
Registered: Aug 2008
Posts: 3382
There are two problems. The pathing problem is real. FF2 needs those files in the same folder as the base document. This held true when loading your html page directly without floatbox. (I had to flush my cache to prove this.)

The second problem is that FF2 requires wmode="opaque" (or "transparent") when inside floatbox. The default for wmode is "window". All my samples and the direct load code in floatbox use "opaque" and that's why they are all working. Add wmode="opaque" to the flash parameters and you should be good to go.

Almost...

I am having a 3rd problem with your video. It's now loading ok, but I can't start it because it is not responding to mouse actions. I'm running my FF2 inside a Virtual PC and that might be preventing your flash from seeing the mouse actions. Please let me know how that works for you (on a non-virtual PC I presume). All my other flash that has mouse actions are seeing the mouse ok.
m3mph1s
Guest
Argh. This is really killing me now. I followed what you said as best I could, and swapped in flow player to see if it helped, and I wound up with the same result as what you described- I can have it display perfectly and load and everything, but I just can't interact with it (see below) which is weird because now it's (basically) the exact same code as the kermit flash on your demo page (and all of the files are in the root)...

Then I also tried exporting it from flash to HTML and then just using what it spits out, which was very, very different code- but the exact same result (see below)

I also tried using SWFobject to embed the flash instead but it got a little too confusing for me, and it didn't work

I have tried so many different things that it's been gettting really confusing, but I guess this is the closest I've come yet... and I feel it is really close.

Here's a link to a copy of the media page where I tried flow player for the low demo (no interaction in FF2)

And here's a link directly to the iframe page, where I can interact with it just fine

Here's a link to a copy of the media page where I used the flash HTML for the low demo (also no interaction)

And then here's a link directly to the iframe page for the flash HTML, where I can interact with it just fine again

Do you get the same results with those links? Do you see something different with my code than your kermit code that is making it not work?
m3mph1s
Guest
I tried again with SWFobject after reading some posts about how it often fixes problems like this, and now I can get it to the same point where it plays but isn't accessible... so now I have three separate ways of displaying it but so far none that let me use the controls... the code for using SWFobject is very similar to how you did the kermit file, except this uses an extra JS file I guess and loads the SWF instead of the FLV directly.

Here's what I mean

And the demolo page itself

The fight continues...
Administrator
Registered: Aug 2008
Posts: 3382
What a remarkably stubborn problem.
But I've made some headway and have an action plan (being a man of action).
It's not just your flash object. Check out kermit on my demo page with FF2 and you'll see that you can't control it with the mouse either.

This is clearly some sort of Firefox2/Flash interaction bug (I'm diverting the blame away from floatbox) because this mis-behaviour does not occur in any other browser. The bug seems to only occur when an iframe is inside an absolutely positioned div and these components are added via script to the DOM. When I recreate the floatbox element hierarchy directly on the page the problem does not occur.

This is all very interesting, if not particularly helpful. But there is hope.

In my experiments I discovered that the if the main floatbox has position=fixed instead of absolute then the mouse is active in both kermit and your flash. Unless I can find an alternative, I will add code into a new version of floatbox that will set fix positioning whenever the combo of FF2 and iframe content is encountered. I'm a little reluctant to do this because FF2 is on its way out, but one of my targets for floatbox is that it work everywhere (within reason).

So that's the long term fix. Short-term, if I was in your shoes, I would auto-start the flash on load. IMHO you should be doing this anyway. When I (your site visitor) click on that link, it is not because I want to see the content not play. It's mildly irritating that I have to click again to get it going. (Are you sure? (Are you sure you're sure??)) Auto-play would work-around the FF2 mouse issue. FF2 users couldn't pause or rewind but they can still watch and use the close button to get out. Everyone else could use the controls as usual.

I really appreciate your persistence and keeping me involved on this issue as it's given me the opportunity to see what's going on and what needs to be done. Isn't it always the way that there's one thing that ends up eating up hours and hours.

By the way, if you use Flowplayer (so you can set autoPlay:true) you can configure it so the player controls are static and always visible if that's your preference.
m3mph1s
Guest
Oh wow, I can't believe that I didn't realise the problem existed on your kermit video as well... and here I was thinking that it was just something on my end... That's too bad. But you did raise some good points.

I totally understand what you mean about the autoplay, the only reason that I haven't set it up yet is because of size... the 'low' reel is about 12mb and the 'high' reel is about 23mb... since it's a reel consisting of very different quality of sources, compressing it any more than I did gave me unfavorable results...but I guess I don't really have a choice at this point.

The player choice isn't a big deal, I mean it works either way so I can just make it auto play in the SWF or w/e.

So I guess that's fine, I mean it works perfectly in all browsers except 1 version, and as long as the connection speeds aren't ultra slow then I should be okay... Other than that I'll just wait patiently for the next version :P

Thanks a ton for the help and of course keep me posted if you make any other discoveries.
bergonom
Guest
I'm having a similar problem with Flash/Floatbox/FF2. Whenever I tried to open a SWF in a floatbox (either directly or as in iframe using swfobject) the SWF is pretty much invisible.

I am just getting started with Floatbox and I am creating some very simple test files to get started. I created just about the simplest possible SWF (just a button on the stage) but I can't see it when I open the floatbox. If I rollover the place where the button should be, however, my cursor changes and I can click on the button.

As described below this only happens in FF2 - other browsers show the Flash fine.

I wanted to try the recommended solution (use position=fixed instead of absolute) but I'm not sure how to do that. I tried using boxLeft and boxTop but that didn't do anything.

Any suggestions? I really need this to work with Flash/FF2 or I will have to find another lightbox library (and I doubt I will find one this good!).

Thanks.
Administrator
Registered: Aug 2008
Posts: 3382
Oh man! Not the FF2/Flash issue again. :|

If you're using the most recent version of floatbox, it's already setting position fixed for ff2 showing direct loaded flash. You get that for free. Here's what I think you could try.

Set it up on its own page and load it as an iframe. Then you have more control over the parameters. Try it with wmode=window and again with wmode=opaque. Also try it with swfobject and without - that is, just set up with normal object/embed code.

Also, if you could send me the flash file I wouldn't mind experimenting with it.

FF2. Are there really more than 7 people still using that? I know IE folks don't upgrade (they never installed the browser in the first place), but surely just about every firefox user has updated to 3 something???
bergonom
Guest
Even worse, I realize now that the problem only
occurs on FF2/Mac. Everything seems to work fine
in FF2/XP.

I realize FF2/Mac users probably make up a pretty
small percentage of users (maybe 1-3%, although
I can't find statistics on that specific combination),
but I will describe the situation in more detail below
anyway in case you are interested.

I've posted a very simple example of what I've done here:
http://ifrolf.com/fb_test/

I have links to an iframe version (both embedded
and using swfobject) and a direct load of the SWF.

The iframe versions rarely display correctly.
The direct load version almost always displays correctly.
Even when the Flash initially shows up correctly in
any version, however, as soon as I click anywhere in
the Flash it disappears. It's still there though. As I mentioned
in the previous post I can still roll over the invisible button.

The FLA source file can be found here:
http://ifrolf.com/fb_test/flash.fla

Thanks for your time and responsiveness.
Administrator
Registered: Aug 2008
Posts: 3382
I'm not going to be able to sort this one out. I spent a lot of time trying to find a way to run flash reliably on old browsers on macs, for the most part successfully. Bottom line is, it appears that some flash (but not all) will not play correctly in floatbox on Firefox 2x on a Mac. Life's like that. Sorry I can't make it 100% for you. :(
bergonom
Guest
I am just going to point FF2/Mac users to the FF3 upgrade page.

I hope I didn't come across as too critical of Floatbox. It is by far the most feature-rich lightbox I've found and I'm excited to work with it. Your responsiveness to my questions has put Floatbox way over the top in my book.

Thanks again for looking into this.

Page: 1