SWFOBJECT CurrentFrame Javascript

Question

I am having a challenge getting the current frame playing. I am using swfobject ver 2.2.

Here is my script:

 <script type="text/javascript">

        function flashplayer(flashname) {

            var flashvars = {};
            var params = {};
            params.play = "true";
            params.menu = "true";
            params.scale = "noscale";
            params.allowfullscreen = "true";
            var attributes = {
                id: "flashDiv",
                name: "flashDiv"
            };
            swfobject.embedSWF(flashname, "myAlternativeContent", "800", "600", "9.0.0", flashvars, params, attributes);
            var obj = swfobject.getObjectById("myAlternativeContent");
            totalFrames = obj.totalFrames;
            $('#duration').html(totalFrames);
            currentFrame1 = obj.currentFrame;
            $('#current').html(currentFrame1);
            obj.addEventListener("onStateChange", "onytplayerStateChange");
        }
        function onStateChange() {
            var obj = swfobject.getObjectById("myAlternativeContent");
            currentFrame1 = obj.TcurrentFrame;
            $('#current').html(currentFrame1);
        }
        function stopflash() {
            var obj = swfobject.getObjectById("myAlternativeContent");
            obj.Stop();
        }
        function PlayFlash() {
            var obj = swfobject.getObjectById("myAlternativeContent");
            obj.Play();
        }
        function FlashRewind() {
            var obj = swfobject.getObjectById("myAlternativeContent");
            obj.Rewind();
        }
    </script>

   <div id="duration">
        1
    </div>
    <div id="current">
        1
    </div>
    <input onclick="flashplayer('../../Video/test.swf');" type="button" style="width: 300px"
        value="play flash" /><br />

Thanks in advance.

Answer 1

At a quick glance, I see three problems with your code.

1. By specifying an ID and name in your attributes object, you're assinging a name to the newly created <object>. This means swfobject.getObjectById("myAlternativeContent") won't work, because you've renamed the <object> to "flashDiv". You should use swfobject.getObjectById("flashDiv") instead.

2. You're trying to use swfobject.getObjectById immediately after swfobject.embedSWF. However this probably won't work, because the embed might not be completed before swfobject.getObjectById is invoked. (BTW, getObjectById is only needed for static publishing; when using dynamic publishing, it's ok to use the standard getElementById)

3. You're not specifying the express install parameter, so your SWFObject syntax is invalid. Use this instead:

.

swfobject.embedSWF(flashname, "myAlternativeContent", "800", "600", "9.0.0", false, flashvars, params, attributes);

.

A solution to #1 and #2 is to use SWFObject's callback feature. This helps with timing by ensuring you won't invoke your DOM functions until the embed is successful. It also provides a reference to the embedded <object> which enables you to avoid making the swfobject.getObjectById call.

function flashplayer(flashname) {

    var flashvars = {};
    var params = {};
    params.play = "true";
    params.menu = "true";
    params.scale = "noscale";
    params.allowfullscreen = "true";
    var attributes = {
        id: "flashDiv",
        name: "flashDiv"
    };
    function mycallback(event){
        var obj = event.ref;
        totalFrames = obj.totalFrames;
        $('#duration').html(totalFrames);
        currentFrame1 = obj.currentFrame;
        $('#current').html(currentFrame1);
        obj.addEventListener("onStateChange", "onytplayerStateChange");
    }
    swfobject.embedSWF(flashname, "myAlternativeContent", "800", "600", "9.0.0", false, flashvars, params, attributes, mycallback);
}

Bear in mind you may still encounter timing issues; SWFObject's callback is invoked as soon as the <object> is embedded in the page -- it doesn't mean the SWF has finished loading.

You can check the SWF's loading status by checking Flash Player's PercentLoaded method combined with a JavaScript setInterval.

var obj = event.ref;
if(obj.PercentLoaded() === 100){
    //do stuff
} else {
    //Use setInterval to check PercentLoaded again
}