יצירת הכיתה של מנהל המודעות

ב-ads_manager.js, מגדירים מחלקת wrapper ל-StreamManager של IMA SDK שמבצעת בקשות לסטרימינג, מקבלת את מניפסט רצף המודעות, מאזינה לאירועי סטרימינג של IMA ומעבירה אירועי emsg ל-IMA SDK.

באפליקציית הדוגמה של IMA HbbTV, ב-ads_manager.js, מוגדרות השיטות הבאות:

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

אתחול של Ad Manager

מאתחלים את המחלקה של הכלי לניהול מודעות ומגדירים מאזינים לאירועים של זרם 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);
};

שליחת בקשה לשידור של רצף מודעות

יוצרים את שיטת AdManager.requestStream() כדי ליצור אובייקט PodStreamRequest באמצעות הקוד של רשת Google Ad Manager שלכם ומפתח הנכס המותאם אישית של הסטרימינג. כדי לבדוק את אפליקציית 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();
  var secretKey = getStreamSecretKeys();

  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';

  if (secretKey.STREAM_CREATE_SECRET) {
    var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;
    var params = {
      custom_asset_key: customAssetKey,
      exp: expirationTime,
      network_code: networkCode
    };
    streamRequest.authToken =
        this.generateAuthToken(params, secretKey.STREAM_CREATE_SECRET);
    debugView.log('AdsManager: make Auth-PodStreamRequest');
  } else {
    debugView.log('AdsManager: make PodStreamRequest without auth');
  }

  this.streamManager.requestStream(streamRequest);
};

המתנה לאירועים של שידור מודעות

יוצרים את השיטה 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;
  }
};

טיפול במטא-נתונים של מקורות תנועה לפרסום

כדי להעביר את פרטי האירוע 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);
  }
};

טעינת המניפסט של רצף המודעות

יוצרים את השיטה AdManager.loadAdPodManifest() לטעינה מראש של מניפסט רצף המודעות עם נגן הווידאו. יוצרים כתובת URL מאומתת של מניפסט באמצעות המבנה שמופיע בשיטה: מניפסט של DASH pod.

/**
 * 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('AdsManager: No stream data available.');
    return;
  }

  var adBreakId = this.getAdBreakId();
  var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;

  var params = {
    ad_break_id: adBreakId,
    custom_asset_key: customAssetKey,
    exp: expirationTime,
    network_code: networkCode,
    pd: podDuration
  };

  var secretKey = getStreamSecretKeys();
  var token = this.generateAuthToken(params, secretKey.MANIFEST_SECRET);
  var encodedToken = encodeURIComponent(token);

  var manifestUrl = 'https://dai.google.com/linear/pods/v1/dash/network/' +
    networkCode + '/custom_asset/' + customAssetKey + '/stream/' +
    this.streamData.streamId + '/ad_break_id/' + adBreakId +
    '/manifest.mpd?pd=' + podDuration + '&auth-token=' + encodedToken;

  this.videoPlayer.preload(manifestUrl);
};

באפליקציית הדוגמה של HbbTV נעשה שימוש בערך adBreakId ייחודי שנוצר באופן אקראי. באפליקציות בייצור, הערך של adBreakId הוא מחרוזת אלפאנומרית, למשל ab-001, שגדלה באחד בכל הפסקה לפרסומות. מוודאים שהערך adBreakId זהה לכל הצופים בהפסקה למודעה. כדי לקבל ערך של adBreakId, מומלץ להשתמש ב-DAI Ad Break API. בסביבת ייצור, צריך לכלול את הערך adBreakId ואת הערך podDuration באירוע של זרם HbbTV‏ AD_BREAK_ANNOUNCE.

.

לאחר מכן, יוצרים את המחלקה הראשית של האפליקציה ל-HbbTV שמבצעת אינטראקציה עם שידור ה-HbbTV.

הקודם
הגדרת מחלקת השחקנים
הבא
פיתוח גרסת build של הכיתה של האפליקציה