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

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

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

  • 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);
};
ads_manager.js

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

יוצרים את השיטה AdManager.requestStream() כדי ליצור אובייקט PodStreamRequest באמצעות קוד הרשת של Google Ad Manager ומפתח הנכס המותאם אישית של הסטרימינג. כדי לבדוק את אפליקציית ה-HbbTV, משתמשים ב-IMA sample DASH pod serving stream עם הפרמטרים הבאים:

  • Network code: ‏ '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.

/**
 * 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 הוא מספר שלם שמתחיל ב-1 וגדל ב-1 בכל הפסקה למודעה. חשוב לוודא שהערך של podId יהיה זהה לכל הצופים בהפסקה למודעה. כדי לקבל podId, מומלץ להשתמש ב-API של התראות מראש על הפסקות למודעות (EABN). בסביבת ייצור, צריך לכלול את podId ו-podDuration באירוע הסטרימינג של HbbTV‏ AD_BREAK_ANNOUNCE.

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

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