谷歌 IMA + MediaElementJS

Question

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

IMA 使用 Flash 组件，可以轻松添加到舞台并进行配置。有没有办法在不使用 Google IMA Flash SDK 的情况下将它与 MediaElements.JS 一起使用？

更新：

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

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

Answer 1

好吧，既然没有人知道或愿意回答，..

根据MediaElement.JS的网站，很快就会有关于postrolls的教程。每当出现这种情况时（或者如果我在那之前开始编写此 ActionScript），我都会在此处发布预卷版本。

更新：

最终我们只是想通了。有一些内容需要添加到 Media Element，尤其是在 FlashMediaElement.as 文件中。

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

接下来打开 MediaElement 的 \src\flash\ 文件夹中的 FlashMediaElement.fla 和 FlashMediaElement.as。

在.FLA文件中，需要将Google IMA组件添加到stage，然后配置preroll标签到任意url。这只是使该字段在 .as 范围内可用。

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

    // 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 的值。您可能希望通过多种方式动态填充这些内容。此示例使用在 HTML 中看到 mediaelement.swf 的位置添加的简单 flashvars 或 JS 使用 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 预卷和后卷。