Adobe Edge HTML5 Local Connection

Question

I`m trying to create two banners with adobeEdge and import them with iframes within 3rd file. So the structure would be something like this:

banner1.html

banner2.html

index.html (where banner1 and banner2 will be embed via iframe).

Those two banners will be animated, however file size, loading time of each may vary so they will not be loaded in the same time.

The problem is that I need them both to start playing in exact same time (in flash that is called local connection), so the idea is to check when both iframes are loaded and if each of them send DONE message to the other one I will play them.

I wrote a code which actually work, but still one banner always has a delay. Here is my code:

Banner 1

 <script type="text/javascript">
    var fr = window.parent.frames["frame2"];
    var frwin = fr.contentWindow;
    var otherLoaded = false;
    var selfLoaded = false;
    var process = setInterval(function(){load();},10);

    window.addEventListener("message", receiveMessage, false);

    function setLoaded(){
        selfLoaded = true;
        frwin.postMessage("Done", "DOMAIN");
    }

    function load(){
        if(otherLoaded === true && selfLoaded === true){
            clearInterval(process);

            AdobeEdge.bootstrapCallback(function(compId) {
                AdobeEdge.getComposition(compId).getStage().play();
            });

        }else if(selfLoaded === true && otherLoaded !== true){
            frwin.postMessage("resend", "http://izorgor.com");

        }
    }

    function receiveMessage(event) {
        if (event.origin !== "DOMAIN")
            return;

        if(event.data === 'Done'){
            otherLoaded = true;
            console.log("Done");
        }
        if(event.data === 'resend'){
            fr = window.parent.frames["frame2"];
            frwin = fr.contentWindow;
            frwin.postMessage("Done", "DOMAIN");
            console.log("resend");
        }
    }
</script>

Banner 2

<script type="text/javascript">
    var fr = window.parent.frames["frame1"];
    var frwin = fr.contentWindow;
    var otherLoaded = false;
    var selfLoaded = false;
    var process = setInterval(function(){load();},10);

    window.addEventListener("message", receiveMessage, false);

    function setLoaded(){
        selfLoaded = true;
        frwin.postMessage("Done", "DOMAIN");
    }

    function load(){
        if(otherLoaded === true && selfLoaded === true){
            clearInterval(process);

            AdobeEdge.bootstrapCallback(function(compId) {
                AdobeEdge.getComposition(compId).getStage().play();
            });
        }else if(selfLoaded === true && otherLoaded !== true){
            frwin.postMessage("resend", "http://izorgor.com");

        }
    }

    function receiveMessage(event) {
        if (event.origin !== "DOMAIN")
            return;

        if(event.data === 'Done'){
            otherLoaded = true;
            console.log("Done");
        }
        if(event.data === 'resend'){
            fr = window.parent.frames["frame1"];
            frwin = fr.contentWindow;
            frwin.postMessage("Done", "DOMAIN");
            console.log("resend");
        }
    }
</script>

index.html

<iframe width="900" height="200" id="frame1" src="banner1.html" frameborder="0" scrolling="no"></iframe>

Thanks

Answer 1

I think you should contact your AdServer and ask if they are serving the Ad in just one TAG or in two TAGs

You can use libraries as https://github.com/jeremyharris/LocalConnection.js/tree/master (similar to Flash Local Connection)