带有Google前贴片广告的HTML5视频播放器

时间:2012-05-31 16:05:47

标签: javascript html5 html5-video

我一直在开发一种自定义HTML5视频播放器,其中包含前贴片视频。我现在正在实施Google IMA SDK并遇到一些问题。

集成文档在这里: https://developers.google.com/interactive-media-ads/docs/sdks/googlehtml5_ads

我不明白的是实际调用requestAds& onAdsLoaded函数。看起来应该是直截了当但我必须遗漏一些东西。

您可以在此处查看来源:http://jsfiddle.net/cncpts/SZ895/1/

1 个答案:

答案 0 :(得分:3)

我能够弄明白,事实上非常简单。我刚从requestAd函数中删除了事件监听器和adrequest。这是最后的剧本。

<script src="http://www.google.com/uds?file=ima&v=1&nodependencyload=true"></script>
<script>

var adsManager;
var adsLoader;
var clickTrackingOverlay = document.getElementById('clickTrackingOverlay');
var videoElement = document.getElementById('myVideoElement');   
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://ad.doubleclick.net/pfadx/AngelaSite;kw=html5linearnonlinear;sz=300x300;ord=5036130;dcmt=text/xml",
      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>