HTML 5 Issues with Google IMA SDK
html, javascript, sdk
Solution
figured it out next task is to learn how to run this on an embed object inside an iframe
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/uds?file=ima&v=1&nodependencyload=true"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#videohtml5").click(function(){
var adsManager;
var clickTrackingOverlay = document.getElementById('clickTrackingOverlay');
var videoElement = document.getElementById('videohtml5');
var adsLoader = new google.ima.AdsLoader();
// Add event listeners
adsLoader.addEventListener(
google.ima.AdsLoadedEvent.Type.ADS_LOADED,
onAdsLoaded,
false);
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR,
onAdError,
false);
// Create request object
var adsRequest = {
adTagUrl: "http://pubads.g.doubleclick.net/gampad/ads?sz=400x300&iu=%2F6062%2Fiab_vast_samples&ciu_szs=300x250%2C728x90&impl=s&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1&url=[referrer_url]&correlator=[timestamp]&cust_params=iab_vast_samples%3Dlinear",
adType: "video"
};
// Make request
adsLoader.requestAds(adsRequest);
function onAdsLoaded(adsLoadedEvent) {
// Get the ads manager
adsManager = adsLoadedEvent.getAdsManager();
adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
// Listen and respond to events which require you to pause/resume content
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
onPauseRequested);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
onResumeRequested);
// Set a visual element on which clicks should be tracked for video ads
adsManager.setClickTrackingElement(clickTrackingOverlay);
try {
// Call play to start showing the ad.
adsManager.play(videoElement);
} catch (adError) {
// An error may be thrown if there was a problem with the VAST response.
}
}
function onAdError(adErrorEvent) {
// Handle the error logging.
console.log(adErrorEvent.getError());
}
function onPauseRequested() {
videoElement.pause();
// Setup UI for showing ads (e.g. display ad timer countdown,
// disable seeking, etc.)
// setupUIForAd();
}
function onResumeRequested() {
// Setup UI back for showing content.
// setupUIForContent();
videoElement.play();
}
});
});
</script>
<video id="videohtml5" width="720" height="405" controls="controls" onclick="">
<source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>
Problem
Okay i have searched al over for a decent example on how to get the HTML 5 IMA SDK from Google working. I have pasted my code below, all that happens is the HTML 5 video shows up that's it no errors nothing. I don't think the Javascript is even running and I know its because I messed something up. Please help. I just want to display ads into an HTML 5 vid I have substituted my VAST tag for Googles example tag and used a generic video I found on the web for the src video. Anyone have a suggestion on why this doesnt work. ``` <video id="videohtml5" width="720" height="405" controls="controls"> <source src="http://www.cncpts.me/complex/html5-IMA/NewBalance_NYCExperience_FINAL.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> var adsManager; var adsLoader; var clickTrackingOverlay = document.getElementById('clickTrackingOverlay'); var videoElement = document.getElementById('videohtml5'); var adsLoader = new google.ima.AdsLoader(); // Add event listeners adsLoader.addEventListener( google.ima.AdsLoadedEvent.Type.ADS_LOADED, onAdsLoaded, false); adsLoader.addEventListener( google.ima.AdErrorEvent.Type.AD_ERROR, onAdError, false); // Create request object var adsRequest = { adTagUrl: "hhttp://pubads.g.doubleclick.net/gampad/ads?sz=400x300&iu=%2F6062%2Fiab_vast_samples&ciu_szs=300x250%2C728x90&impl=s&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1&url=[referrer_url]&correlator=[timestamp]&cust_params=iab_vast_samples%3Dlinear", adType: "video" }; // Make request adsLoader.requestAds(adsRequest); function onAdsLoaded(adsLoadedEvent) { // Get the ads manager adsManager = adsLoadedEvent.getAdsManager(); adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError); // Listen and respond to events which require you to pause/resume content adsManager.addEventListener( google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, onPauseRequested); adsManager.addEventListener( google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, onResumeRequested); // Set a visual element on which clicks should be tracked for video ads adsManager.setClickTrackingElement(clickTrackingOverlay); try { // Call play to start showing the ad. adsManager.play(videoElement); } catch (adError) { // An error may be thrown if there was a problem with the VAST response. } } function onAdError(adErrorEvent) { // Handle the error logging. console.log(adErrorEvent.getError()); } function onPauseRequested() { videoElement.pause(); // Setup UI for showing ads (e.g. display ad timer countdown, // disable seeking, etc.) // setupUIForAd(); } function onResumeRequested() { // Setup UI back for showing content. // setupUIForContent(); videoElement.play(); } </script> ```