How to determine when an embedded flash object is loaded?

Question

When embedding a flash object, is there a way to determine when it's fully loaded?

That's my basic question, but for anyone interested in the details behind it:

I am using the (DOMWindow) jQuery plugin. For those not familiar, it's a basic overlay the appears centered on the page, above all other content which is dimmed.

Inside of the DOMWindow, I am embedded a YouTube video. The markup used to embed the video is AJAX injected.

The DOMWindow has a built in loading graphic, but the problem I am having is that the AJAX GET request is completed almost instantly, and for 3-5 seconds, I'm stuck looking at a white rectangle while waiting for the YouTube video to load.

If I could figure out how to determine when it's finished loading, I could code a more graceful loading scheme (using a animated spinner) inside of the DOMWindow.

Answer 1

You should take a look at this page Youtube Player Javascript API. Subscribing to the onStateChange Event and looking for it to return 5 appears to be what you want to do.

I'll leave my original answer, in case it might still be handy. It is below.

You may want to look at this blog entry. He is passing Flash events to javascript to monitor a video. He specifically mentions waiting for the movie to dl and attach to the player. I'm not sure these techniques work with the youtube player.

Answer 2

The ultimate way to do this is to get some kind of confirmation from the Flash that it is ready to display (as with, in this case, a YouTube API).

Short of that, there's no objective point when a Flash movie is finished loading. Once the first frame is loaded it can display initial content while later content loads, and even if the root SWF file is loaded, it may need to load more external content before it can display anything. (YouTube probably falls into this latter category, as will any service where the content is loaded by the container SWF.)

Answer 3

It you're looking for a more general Flash reference, Flash makes available OnProgress, OnReadyStateChange and PercentLoaded as Javascript properties of the OBJECT or EMBED element. http://www.adobe.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html