کلاس مدیر تبلیغات را ایجاد کنید

در ads_manager.js ، یک کلاس wrapper برای IMA SDK StreamManager تعریف کنید که درخواست‌های استریم می‌کند، مانیفست آگهی را دریافت می‌کند، به رویدادهای جریان IMA گوش می‌دهد و رویدادهای emsg را به IMA SDK ارسال می‌کند.

در ads_manager.js ، برنامه نمونه IMA HbbTV روش‌های زیر را تنظیم می‌کند:

  • requestStream()
  • onStreamEvent()
  • onEmsgEvent()
  • loadAdPodManifest()

مدیر تبلیغات را راه اندازی کنید

کلاس مدیر تبلیغات را راه اندازی کنید و شنوندگان را برای رویدادهای جریان IMA تنظیم کنید. در این فراخوانی، کنترل کننده رویداد emsg را با متد VideoPlayer.setEmsgEventHandler() تنظیم کنید.

/**
 * Wraps IMA SDK ad stream manager.
 * @param {!VideoPlayer} videoPlayer Reference an instance of the wrapper from
 * video_player.js.
 */
var AdManager = function(videoPlayer) {
  this.streamData = null;
  this.videoPlayer = videoPlayer;
  // Ad UI is not supported for HBBTV, so no 'adUiElement' is passed in the
  // StreamManager constructor.
  this.streamManager = new google.ima.dai.api.StreamManager(
      this.videoPlayer.videoElement);
  this.streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.CLICK,
        google.ima.dai.api.StreamEvent.Type.STARTED,
        google.ima.dai.api.StreamEvent.Type.FIRST_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.MIDPOINT,
        google.ima.dai.api.StreamEvent.Type.THIRD_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.COMPLETE,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
        google.ima.dai.api.StreamEvent.Type.AD_PROGRESS,
        google.ima.dai.api.StreamEvent.Type.PAUSED,
        google.ima.dai.api.StreamEvent.Type.RESUMED
      ],
      this.onStreamEvent.bind(this),
      false);

  this.videoPlayer.setEmsgEventHandler(this.onEmsgEvent, this);
};
ads_manager.js

درخواستی برای پخش غلاف تبلیغاتی ارائه دهید

برای ایجاد یک شی PodStreamRequest با استفاده از کد شبکه Google Ad Manager و کلید دارایی سفارشی جریان، متد AdManager.requestStream() ایجاد کنید. برنامه HbbTV خود را با استفاده از جریان سرویس دهی DASH نمونه IMA با پارامترهای جریان زیر آزمایش کنید:

  • کد شبکه : '21775744923'
  • کلید دارایی سفارشی : 'hbbtv-dash' 
/**
 * Makes a pod stream request.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 */
AdManager.prototype.requestStream = function(networkCode, customAssetKey) {
  var streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';
  debugView.log('AdsManager: make PodStreamRequest');
  this.streamManager.requestStream(streamRequest);
};
ads_manager.js

به رویدادهای جریان تبلیغات گوش دهید

روش AdManager.onStreamEvent() ایجاد کنید تا پاسخ برنامه شما به رویدادهای جریان IMA، STREAM_INITIALIZED ، AD_BREAK_STARTED و AD_BREAK_ENDED را مدیریت کند.

/**
 * Handles IMA playback events.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onStreamEvent = function(event) {
  switch (event.type) {
    // Once the stream response data is received, generate pod manifest url
    // for the video stream.
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      debugView.log('IMA SDK: stream initialized');
      this.streamData = event.getStreamData();
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      break;
    // Hide video controls while ad is playing.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      debugView.log('IMA SDK: ad break started');
      this.adPlaying = true;
      this.adBreakStarted = true;
      break;
    // Show video controls when ad ends.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      debugView.log('IMA SDK: ad break ended');
      this.adPlaying = false;
      this.adBreakStarted = false;
      break;
    // Update ad countdown timers.
    case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
      break;
    default:
      debugView.log('IMA SDK: ' + event.type);
      break;
  }
};
ads_manager.js

مدیریت فراداده جریان تبلیغات

برای ارسال اطلاعات رویداد emsg به IMA، متد AdManager.onEmsgEvent() با استفاده از متد StreamManager.processMetadata() ایجاد کنید. کلاس پخش کننده ویدیو این متد را با متد VideoPlayer.setEmsgEventHandler() فراخوانی می کند.

/**
 * Callback on Emsg event.
 * Instructs IMA SDK to fire back VAST events accordingly.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onEmsgEvent = function(event) {
  var data = event.event.messageData;
  var pts = event.event.calculatedPresentationTime;
  if ((data instanceof Uint8Array) && data.byteLength > 0) {
    this.streamManager.processMetadata('ID3', data, pts);
  }
};
ads_manager.js

مانیفست غلاف آگهی را بارگیری کنید

متد AdManager.loadAdPodManifest() را ایجاد کنید تا مانیفست غلاف تبلیغاتی را از قبل با پخش کننده ویدیو بارگیری کنید. URL مانیفست را با استفاده از ساختار در روش: DASH pod manifest بسازید.

/**
 * Creates DAI pod url and instructs video player to load manifest.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 * @param {number} podDuration The duration of the ad pod.
 */
AdManager.prototype.loadAdPodManifest =
    function(networkCode, customAssetKey, podDuration) {
  if (!this.streamData) {
    debugView.log('IMA SDK: No DAI pod session registered.');
    return;
  }

  var MANIFEST_BASE_URL = 'https://dai.google.com/linear/pods/v1/dash/network/';
  // Method: DASH pod manifest reference docs:
  // https://developers.google.com/ad-manager/dynamic-ad-insertion/api/pod-serving/reference/live#method_dash_pod_manifest
  var manifestUrl = MANIFEST_BASE_URL + networkCode + '/custom_asset/' +
    customAssetKey + '/stream/' + this.streamData.streamId + '/pod/' +
    this.getPodId() + '/manifest.mpd?pd=' + podDuration;
  this.videoPlayer.preload(manifestUrl);
};
ads_manager.js

برنامه نمونه HbbTV از یک podId منحصر به فرد تولید شده به صورت تصادفی استفاده می کند. در برنامه‌های تولیدی، podId یک عدد صحیح است که از یک شروع می‌شود و برای هر وقفه تبلیغاتی یک عدد افزایش می‌یابد. مطمئن شوید که podId برای همه بینندگان وقفه تبلیغاتی یک مقدار باشد. برای دریافت podId ، توصیه می‌کنیم از API Early break notifications (EABN) استفاده کنید. در یک محیط تولید، podId و podDuration در رویداد پخش جریانی HbbTV AD_BREAK_ANNOUNCE قرار دهید.

سپس، کلاس برنامه اصلی را برای برنامه HbbTV خود ایجاد کنید که با پخش HbbTV تعامل دارد.

قبلی
کلاس پخش را تنظیم کنید
بعدی
کلاس برنامه را بسازید