Search the Community

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