Autplay ad on mobile browser using IMA HTML5 SDK
566 views
Skip to first unread message
Aniket Srivastava
Sep 19, 2017, 6:45:34 AM9/19/17
to Interactive Media Ads SDK
Hi,
I have been trying to autoplay add on mobile using HTML5 sdk . it works on desktop but on mobile all it does is i get the image of LINEAR 10 sec and it gets stuck there. i have looked in all the forums and have not been able to accomplish AD autoplay on mobile. please help me out :
Here is my code:
HTML:
<html>
<head>
<title>IMA HTML5 Simple Demo</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainContainer">
<div id="content">
<video id="contentElement" playsinline muted>
<source src="http://rmcdn.2mdn.net/Demo/vast_inspector/android.mp4"></source>
<source src="http://rmcdn.2mdn.net/Demo/vast_inspector/android.webm"></source>
</video>
</div>
<div id="adContainer"></div>
</div>
<!--<button id="playButton">Play</button>-->
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script type="text/javascript" src="ads.js"></script>
</body>
</html>
ads.js:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
// Copyright 2013 Google Inc. All Rights Reserved.
// You may study, modify, and use this example for any purpose.
// Note that this example is provided "as is", WITHOUT WARRANTY
// of any kind either expressed or implied.
var adsManager;
var adsLoader;
var adDisplayContainer;
var intervalTimer;
//var playButton;
var videoContent;
function init() {
videoContent = document.getElementById('contentElement');
// playButton = document.getElementById('playButton');
// playButton.addEventListener('click', playAds);
setUpIMA();
}
function setUpIMA() {
// Create the ad display container.
createAdDisplayContainer();
// 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);
// An event listener to tell the SDK that our content video
// is completed so the SDK can play any post-roll ads.
var contentEndedListener = function() {adsLoader.contentComplete();};
videoContent.onended = contentEndedListener;
// Request video ads.
var adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = '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=';
// 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 createAdDisplayContainer() {
// We assume the adContainer is the DOM id of the element that will house
// the ads.
adDisplayContainer = new google.ima.AdDisplayContainer(
document.getElementById('adContainer'), videoContent);
}
function playAds() {
// Initialize the container. Must be done via a user action on mobile devices.
videoContent.load();
adDisplayContainer.initialize();
try {
// Initialize the ads manager. Ad rules playlist will start at this time.
adsManager.init(640, 360, 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.
videoContent.play();
}
}
function onAdsManagerLoaded(adsManagerLoadedEvent) {
// Get the ads manager.
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
// videoContent should be set to the content video element.
adsManager = adsManagerLoadedEvent.getAdsManager(
videoContent, 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);
playAds();
}
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.
videoContent.play();
}
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.
if (ad.isLinear()) {
clearInterval(intervalTimer);
}
break;
}
}
function onAdError(adErrorEvent) {
// Handle the error logging.
console.log(adErrorEvent.getError());
adsManager.destroy();
}
function onContentPauseRequested() {
videoContent.pause();
// This function is where you should setup UI for showing ads (e.g.
// display ad timer countdown, disable seeking etc.)
// setupUIForAds();
}
function onContentResumeRequested() {
videoContent.play();
// 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();
}
// Wire UI element references and UI event listeners.
init();
I have been trying to autoplay add on mobile using HTML5 sdk . it works on desktop but on mobile all it does is i get the image of LINEAR 10 sec and it gets stuck there. i have looked in all the forums and have not been able to accomplish AD autoplay on mobile. please help me out :
Here is my code:
HTML:
<html>
<head>
<title>IMA HTML5 Simple Demo</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainContainer">
<div id="content">
<video id="contentElement" playsinline muted>
<source src="http://rmcdn.2mdn.net/Demo/vast_inspector/android.mp4"></source>
<source src="http://rmcdn.2mdn.net/Demo/vast_inspector/android.webm"></source>
</video>
</div>
<div id="adContainer"></div>
</div>
<!--<button id="playButton">Play</button>-->
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script type="text/javascript" src="ads.js"></script>
</body>
</html>
ads.js:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
// Copyright 2013 Google Inc. All Rights Reserved.
// You may study, modify, and use this example for any purpose.
// Note that this example is provided "as is", WITHOUT WARRANTY
// of any kind either expressed or implied.
var adsManager;
var adsLoader;
var adDisplayContainer;
var intervalTimer;
//var playButton;
var videoContent;
function init() {
videoContent = document.getElementById('contentElement');
// playButton = document.getElementById('playButton');
// playButton.addEventListener('click', playAds);
setUpIMA();
}
function setUpIMA() {
// Create the ad display container.
createAdDisplayContainer();
// 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);
// An event listener to tell the SDK that our content video
// is completed so the SDK can play any post-roll ads.
var contentEndedListener = function() {adsLoader.contentComplete();};
videoContent.onended = contentEndedListener;
// Request video ads.
var adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = '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=';
// 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 createAdDisplayContainer() {
// We assume the adContainer is the DOM id of the element that will house
// the ads.
adDisplayContainer = new google.ima.AdDisplayContainer(
document.getElementById('adContainer'), videoContent);
}
function playAds() {
// Initialize the container. Must be done via a user action on mobile devices.
videoContent.load();
adDisplayContainer.initialize();
try {
// Initialize the ads manager. Ad rules playlist will start at this time.
adsManager.init(640, 360, 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.
videoContent.play();
}
}
function onAdsManagerLoaded(adsManagerLoadedEvent) {
// Get the ads manager.
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
// videoContent should be set to the content video element.
adsManager = adsManagerLoadedEvent.getAdsManager(
videoContent, 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);
playAds();
}
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.
videoContent.play();
}
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.
if (ad.isLinear()) {
clearInterval(intervalTimer);
}
break;
}
}
function onAdError(adErrorEvent) {
// Handle the error logging.
console.log(adErrorEvent.getError());
adsManager.destroy();
}
function onContentPauseRequested() {
videoContent.pause();
// This function is where you should setup UI for showing ads (e.g.
// display ad timer countdown, disable seeking etc.)
// setupUIForAds();
}
function onContentResumeRequested() {
videoContent.play();
// 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();
}
// Wire UI element references and UI event listeners.
init();
Message has been deleted
Aniket Srivastava
Sep 19, 2017, 6:58:51 AM9/19/17
to Interactive Media Ads SDK
Hi,
I forgot to mention this is happening on chrome. it is working fine in mozilla firefox.
I forgot to mention this is happening on chrome. it is working fine in mozilla firefox.
Chris Feldman (IMA SDK Team)
Sep 19, 2017, 2:58:40 PM9/19/17
to Interactive Media Ads SDK
Hi Aniket,
I recommend taking a look at our Mobile Autoplay Guide. The guide offers steps for converting our Simple Example to autoplay.
Please let me know if you continue to have issues.
Regards,
Chris Feldman
IMA SDK Team
Message has been deleted
Aniket Srivastava
Sep 20, 2017, 1:00:55 AM9/20/17
to Interactive Media Ads SDK
Hi Chris,
I you look at my code i have done the exact thing but it does not work . My chrome verison is also 60.
Chris Feldman (IMA SDK Team)
Sep 20, 2017, 11:48:43 AM9/20/17
to Interactive Media Ads SDK
Hi Aniket,
I'm seeing behavior similar to what you're describing when I test on version 60 of Chrome for Android. However, your code is working fine on my iPhone, as well as my other Android device on Chrome 61 (which is the latest version of Chrome). Can you please upgrade to Chrome 61 and try again? I think that will resolve your issue.
Regards,
Chris Feldman
IMA SDK Team
Aniket Srivastava
Sep 21, 2017, 1:10:32 AM9/21/17
to Interactive Media Ads SDK
Hi,
Thanks for your reply . i have also found a way to make it work on chrome 60. Adding the below javascript did the trick for me:
<script>
var vc = document.getElementById('contentElement');
vc.muted = true;
vc.setAttribute(muted, 'muted');
vc.setAttribute(autoplay, 'autoplay');
</script>
Thanks for your reply . i have also found a way to make it work on chrome 60. Adding the below javascript did the trick for me:
<script>
var vc = document.getElementById('contentElement');
vc.muted = true;
vc.setAttribute(muted, 'muted');
vc.setAttribute(autoplay, 'autoplay');
</script>
Reply all
Reply to author
Forward
0 new messages