谷歌 IMA + MediaElementJS

Question

我已成功合并 HTML5 版本的 Google IMA 广告，并尝试与 MediaElement 的 fla 项目文件挂钩。

IMA 使用 Flash 组件，可以轻松添加到舞台并进行配置。有没有办法将其与 MediaElements.JS 一起使用，而无需使用 Google IMA Flash SDK？

更新：

目前，我一直按照 Google 的 IMA 网站 将其 SWC 组件合并到媒体播放器中。

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

Answer 1

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

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

更新：

最终我们找到了答案。有一些内容需要添加到媒体元素中，特别是在 FlashMediaElement.as 文件中。

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

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

在 .FLA 文件中，您需要将 Google IMA 组件添加到舞台，然后将 preroll 标签配置到任意 url。这只是使该字段在 .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）。

就这样吧； Google IMA 预贴片和后贴片。