Question

I’ve managed to incorporate the HTML5 version of Google IMA ads and am trying to hook in with MediaElement’s fla project file.

IMA uses a Flash Component which can be easily added to stage and configured. Is there any way to use this with MediaElements.JS without resorting to using the Google IMA Flash SDK?

UPDATE:

Currently I’ve been following directions from Google’s IMA site on incorporating their swc component into media players.

Ideally I would like to simply pass a few variables from a JavaScript function to set, trigger, stop and remove video ads.

Answer 1

Well since no one knows or is willing to answer,..

According to MediaElement.JS‘s website, there will soon be a tutorial on postrolls. Whenever that hits (or if I get to working on this ActionScript before then) I will post a preroll version here.

UPDATE:

Eventually we just figured it out. There are a few things which need to be added to Media Element, especially in the FlashMediaElement.as file.

First step is to download and install the Google IMA ActionScript 3 component.

Next open FlashMediaElement.fla and FlashMediaElement.as in MediaElement’s \src\flash\ folder.

In the .FLA file, you need to add the Google IMA component to the stage, then configure the preroll tag to any url. This simply makes that field available in the .as scope.

Finally begin to integrate Google IMA by adding the following properties to the FlashMediaElement class in the .AS file:

    // Google Ad Object
    private var ads:Object;

    private var ad:Object = {
            type:'',
            url:''
        };

    private var episodeData:Object = {
            pre:ad, post:ad, 
            video:'', 
            pageTitle:'',
            title:'',
            source:''
        };

Next up go to the constructor, public function FlashMediaElement() { and set the values for episodeData. There are a number of ways you may want to fill these dynamically. This example is using simple flashvars added on where you see mediaelement.swf in your HTML or JS use mediaelement.swf?title=YourTitle and so on.

        // get parameters
        var params:Object = LoaderInfo(this.root.loaderInfo).parameters;
        //Media Element Params start here
        .
        .
        .

        customVariable = (params['customVariable'] != undefined) ? (String(params['customVariable']) : "DefaultStringValue";

At the end of the constructor all you have to do is call addEventListener(Event.ADDED_TO_STAGE, initialize);

Finally the last step is to place the following functions from the Google IMA Example into the end of your FlashMediaElement class.

        private function initialize(event:Event):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, initialize);
            // videoComponent is the name of the Google In-Stream component instance
            // on the stage.
            log("component version: " + videoComponent.getVersion());
            videoComponent.addEventListener("adStart", onAdStart);
            videoComponent.addEventListener("adComplete", onAdComplete);
            // Attach event listeners to the video component for access
            // to the ads object. The ads object is used for various purposes
            // such as resetting ads across multiple content pieces.
            videoComponent.addEventListener("adsReady", onAdsReady);
            videoComponent.addEventListener("error", onAdError);
            // Attach event listener to the flvplayback component to listen to
            // the content complete event.
            _video.addEventListener("complete", onContentComplete);
        }

            private function onAdsReady(event:Object):void {
              // Extract the ads object from the adsReady event which is later used to
              // reset the ads.
              // The adsReady event is fired when the ads requested through the
              // component are initialized.
            AdSlotSettings.prerollAdTag = episodeData.pre.url;
            ads = event.getAds();
            }

            private function onContentComplete(event:Event):void {
              log("Content complete");
              if (ads) {
            log("Resetting ads.");
            ads.resetAds();
              }
            }

            private function onAdStart(event:Object):void {
              log("Ad has started.");
            }

            private function onAdComplete(event:Object):void {
                log("Ad has completed."); 
            }

            private function onAdError(event:Object):void {
              log("Error occured while playing the ad. Error : "
              + event.getError().message);
            }

            private function log(msg:Object):void {
              //textAreaLogger.appendText(msg + "\n");
            }

textAreaLogger refers to a dynamic text field in the Google example. To vary slightly from Google’s code, you can change textAreaLogger to _output (and set debug=true in the constructor sometimes) if you want to use MediaElement’s built in debug text window.

There you go; Google IMA prerolls and postrolls.