Jump to content

IMA3 SDK canPlayType error


kalevski
 Share

Recommended Posts

hey developers,
I need help. This is my implementation for IMA3 with es6 in Phaser. I have problem in iOS. IMA script try to execute canPlayType on canvas. Why ? IMA3 is only for videos ? How can I fix this ?
Code in ImaController is copy -> paste from official google examples

/**
 * @class ImaManager
 * @author Daniel Kalevski
 */

class ImaManager {
    constructor(game) {
        this.game = game;
        this._defaultTime = null;
        this._adCode = '';
        this._defaultTime = 10;
        this._adCode = 'https://pubads.g.doubleclick.net/gampad/ads?' +
        'sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&' +
        'impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&' +
        'cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=';
        this._domGenerator();
        this._scriptLoader();
        this._elementGame = document.body.getElementsByTagName('canvas')[0];
        this._elementAd = document.getElementById('adContainer');
    }

    showAd() {
        var size = this._getCanvasSize();
        this.controller = new ImaController(this._elementGame, this._elementAd, this._adCode, size.x, size.y);
        this.resize();
    }

    resize() {
        var size = this._getCanvasSize();
        this._elementAd.style.paddingLeft = this._elementGame.style.marginLeft;
        this._elementAd.style.paddingTop = this._elementGame.style.marginTop;
        // this.controller.resize(size.x, size.y);
    }

    setAdCode(adCode) {
        this._adCode = adCode;
    }

    setDefaultTime(defaultTime) {
        this._defaultTime = defaultTime;
    }

    _scriptLoader() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '//imasdk.googleapis.com/js/sdkloader/ima3_debug.js';
        document.body.appendChild(script);
    }

    _domGenerator() {
        var node = document.createElement('div');
        node.id = 'adContainer';
        node.style.background = '#000000';

        node.style.margin = '0';
        node.style.paddingLeft = document.body.getElementsByTagName('canvas')[0].style.marginLeft;
        node.style.paddingTop = document.body.getElementsByTagName('canvas')[0].style.marginTop;
        var size = this._getCanvasSize();
        node.style.width = size.x+'px';
        node.style.height = size.y+'px';
        document.getElementById(this.game.parent).appendChild(node);
    }

    _getCanvasSize() {
        return {
            x: document.getElementsByTagName('canvas')[0].offsetWidth,
            y: document.getElementsByTagName('canvas')[0].offsetHeight
        }
    }
}

var ImaController = (function() {

    var adsManager,
        adsLoader,
        adDisplayContainer,
        intervalTimer,
        gameContent,
        width,
        height;

    function ImaController(game, ad, adTagUrl, widthS, heightS) {
        width = widthS;
        height = heightS;
        // TODO: Fix error on iOS with canPlayType
        gameContent = game;

        // Create the ad display container.
        // We assume the adContainer is the DOM id of the element that will house
        // the ads.
        adDisplayContainer = new google.ima.AdDisplayContainer(ad, gameContent);
        // Initialize the container. Must be done via a user action on mobile devices.
        adDisplayContainer.initialize();
        // Create ads loader.
        adsLoader = new google.ima.AdsLoader(adDisplayContainer);
        // Listen and respond to ads loaded and error events.
        adsLoader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, onAdsManagerLoaded, false);
        adsLoader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError, false);

        // Request video ads.
        var adsRequest = new google.ima.AdsRequest();
        adsRequest.adTagUrl = adTagUrl;

        // Specify the linear and nonlinear slot sizes. This helps the SDK to
        // select the correct creative if multiple are returned.
        adsRequest.linearAdSlotWidth = 640;
        adsRequest.linearAdSlotHeight = 400;

        adsRequest.nonLinearAdSlotWidth = 640;
        adsRequest.nonLinearAdSlotHeight = 150;

        adsLoader.requestAds(adsRequest);
    }

    function onAdsManagerLoaded(adsManagerLoadedEvent) {
        // Get the ads manager.
        var adsRenderingSettings = new google.ima.AdsRenderingSettings();
        adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
        // gameContent should be set to the content game element.
        adsManager = adsManagerLoadedEvent.getAdsManager(gameContent, adsRenderingSettings);

        // Add listeners to the required events.
        adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
        adsManager.addEventListener(google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, onContentPauseRequested);
        adsManager.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, onContentResumeRequested);
        adsManager.addEventListener(google.ima.AdEvent.Type.ALL_ADS_COMPLETED, onAdEvent);

        // Listen to any additional events, if necessary.
        adsManager.addEventListener(google.ima.AdEvent.Type.LOADED, onAdEvent);
        adsManager.addEventListener(google.ima.AdEvent.Type.STARTED, onAdEvent);
        adsManager.addEventListener(google.ima.AdEvent.Type.COMPLETE, onAdEvent);

        try {
            // Initialize the ads manager. Ad rules playlist will start at this time.
            adsManager.init(width, height, google.ima.ViewMode.NORMAL);
            // Call play to start showing the ad. Single video and overlay ads will
            // start at this time; the call will be ignored for ad rules.
            adsManager.start();
        } catch (adError) {
            // An error may be thrown if there was a problem with the VAST response.
        }
    }

    function onAdEvent(adEvent) {
        // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
        // don't have ad object associated.
        var ad = adEvent.getAd();
        switch (adEvent.type) {
            case google.ima.AdEvent.Type.LOADED:
                // This is the first event sent for an ad - it is possible to
                // determine whether the ad is a video ad or an overlay.
                if (!ad.isLinear()) {
                    // Position AdDisplayContainer correctly for overlay.
                    // Use ad.width and ad.height.

                }
                break;
            case google.ima.AdEvent.Type.STARTED:
                // This event indicates the ad has started - the video player
                // can adjust the UI, for example display a pause button and
                // remaining time.
                if (ad.isLinear()) {
                    // For a linear ad, a timer can be started to poll for
                    // the remaining time.
                    intervalTimer = setInterval(
                        function() {
                            var remainingTime = adsManager.getRemainingTime();
                        },
                        300); // every 300ms
                }
                break;
            case google.ima.AdEvent.Type.COMPLETE:
                // This event indicates the ad has finished - the video player
                // can perform appropriate UI actions, such as removing the timer for
                // remaining time detection.
                adDisplayContainer.destroy();
                if (ad.isLinear()) {
                    clearInterval(intervalTimer);
                }
                break;
        }
    }

    function onAdError(adErrorEvent) {
        // Handle the error logging.
        console.log(adErrorEvent.getError());
        adsManager.destroy();
    }

    function onContentPauseRequested() {
        // This function is where you should setup UI for showing ads (e.g.
        // display ad timer countdown, disable seeking etc.)
        // setupUIForAds();
    }

    function onContentResumeRequested() {

        // This function is where you should ensure that your UI is ready
        // to play content. It is the responsibility of the Publisher to
        // implement this function when necessary.
        // setupUIForContent();
    }
    return ImaController;
}());

export default ImaManager

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...