javascript - Google IMA SDK 的 HTML 5 问题

Question

好吧，我已经搜索了很多关于如何让 Google 的 HTML 5 IMA SDK 正常工作的示例。

我已经在下面粘贴了我的代码，所发生的只是 HTML 5 视频显示，没有错误。我认为 Javascript 甚至没有运行，我知道它是因为我搞砸了。请帮忙。我只想将广告显示到 HTML 5 视频中

我已将我的 VAST 标签替换为 Google 的示例标签，并使用我在网络上找到的通用视频作为 src 视频。任何人都对为什么这不起作用有建议。

        <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

弄清楚下一个任务是学习如何在 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>