Google IMA + MediaElementJS

时间:2012-01-03 23:59:45

标签: javascript flash html5 mediaelement.js

我已成功整合了HTML5版本的Google IMA广告,并尝试使用MediaElement的fla项目文件。

IMA使用Flash组件,可轻松添加到舞台并进行配置。有没有办法在没有使用Google IMA Flash SDK的情况下使用MediaElements.JS?

  

更新

     

目前,我一直在关注Google's IMA site关于将他们的swc组件整合到媒体播放器中的指示。

     

理想情况下,我想简单地从JavaScript函数传递一些变量来设置,触发,停止和删除视频广告。

1 个答案:

答案 0 :(得分:0)

因为没有人知道或愿意回答,...

根据MediaElement.JS的网站,很快就会有一个关于postrolls的教程。无论什么时候命中(或者如果我之前开始处理这个ActionScript),我会在这里发布一个预卷版本。

<强>更新

最终我们才弄清楚了。有一些事情需要添加到Media Element,特别是在FlashMediaElement.as文件中。

第一步是下载并安装Google IMA ActionScript 3组件。

接下来在MediaElement的\ src \ flash \文件夹中打开FlashMediaElement.flaFlashMediaElement.as

在.FLA文件中,您需要将Google IMA组件添加到舞台,然后将preroll标签配置为任何网址。这只是使该字段在.as范围内可用。

最后通过将以下属性添加到.AS文件中的FlashMediaElement类来开始集成Google IMA:

    // 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:''
        };

接下来转到构造函数public function FlashMediaElement() {并设置episodeData的值。您可以通过多种方式动态填充这些内容。这个例子使用简单的flashvars添加到HTML或JS中的mediaelement.swf使用mediaelement.swf?title = YourTitle等等。

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

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

在构造函数结束时,您只需调用addEventListener(Event.ADDED_TO_STAGE, initialize);

最后,最后一步是将Google IMA示例中的以下函数放入FlashMediaElement类的末尾。

        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是指Google示例中的动态文本字段。要与Google的代码略有不同,如果您想使用MediaElement的内置调试文本窗口,可以将textAreaLogger更改为_output(有时在构造函数中设置debug = true)。

你走了;谷歌IMA预售和后期巡逻。