javascript - 谷歌 IMA + MediaElementJS

Question

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

IMA 使用可以轻松添加到舞台和配置的 Flash 组件。有没有什么方法可以在不使用 Google IMA Flash SDK 的情况下将其与 MediaElements.JS 一起使用？

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

既然没有人知道也不愿意回答，..

根据 MediaElement.JS的网站上，很快就会有关于 postrolls 的教程。每当出现这种情况时(或者如果我在那之前开始处理此 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 前置广告和后置广告。