Question

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>

Answer 1

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>