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

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

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

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

הפעלת Ad Manager

מאתחלים את המחלקה ads 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 DASH pod serving עם הפרמטרים הבאים של הזרם:

  • קוד הרשת: '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.

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

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

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