פיתוח גרסת build של הכיתה של האפליקציה

הערה: לפני שממשיכים במדריך הזה, צריך להשלים את השלבים במאמר יצירת מחלקה של כלי ניהול המודעות.

ב-application.js, יוצרים את המחלקה הראשית של אפליקציית HbbTV שמתקשרת עם שידור HbbTV. הכיתה הזו מקיימת אינטראקציה עם broadcastAppManager ועם broadcastContainer. דוגמה למחלקה דומה מופיעה במאמר טיפול באובייקט של שידור אודיו/וידאו.

משנים את אפליקציית הבסיס הזו של HbbTV כדי לבקש שידור IMA ולהגיב לאירועים של הפסקה למודעה.

אתחול האפליקציה

מאתחלים את מחלקת האפליקציה בקובץ application.js, מגדירים את broadcastAppManager ואת broadcastContainer בהתאם למדריך טיפול באובייקט של שידור אודיו ווידאו. לאחר מכן, יוצרים אובייקטים חדשים של VideoPlayer ושל AdManager.

/** Main HbbTV Application. */
var HbbTVApp = function() {
  this.broadcastAppManager = document.getElementById('broadcast-app-manager');
  this.broadcastContainer = document.getElementById('broadcast-video');

  this.playState = -1; // -1 as null play state.

  try {
    this.applicationManager =
        this.broadcastAppManager.getOwnerApplication(document);
    this.applicationManager.show();
    this.broadcastContainer.bindToCurrentChannel();
    this.subscribedToStreamEvents = false;
    this.broadcastContainer.addEventListener(
        'PlayStateChange', this.onPlayStateChangeEvent.bind(this));

    debugView.log('HbbTVApp: App loaded');
    this.videoPlayer = new VideoPlayer();
    this.videoPlayer.setOnAdPodEnded(this.resumeBroadcast.bind(this));
  } catch (e) {
    debugView.log('HbbTVApp: No HbbTV device detected.');
    return;
  }

  this.adManager = new AdManager(this.videoPlayer);
};
application.js

שליחת בקשת סטרימינג של IMA

ב-method‏ HbbTVApp.onPlayStateChangeEvent(), שולחים בקשת סטרימינג בתגובה למעבר האפליקציה אל PRESENTING_PLAYSTATE. בגישה הזו האפליקציה מוכנה לטעינת מניפסט של רצף מודעות בתגובה לאירוע AD_BREAK_EVENT_ANNOUNCE.

if (!this.subscribedToStreamEvents &&
    this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
  this.subscribedToStreamEvents = true;
  this.broadcastContainer.addStreamEventListener(
      STREAM_EVENT_URL, 'eventItem', function(event) {
        this.onStreamEvent(event);
      }.bind(this));
  debugView.log('HbbTVApp: Subscribing to stream events.');
  this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
}
application.js

אם המכשיר לא משדר את מאגר PlayStateChange האירועים בצורה תקינה, אפשר להשתמש בפונקציה setInterval() כדי לבדוק שינויים במצב ההפעלה:

setInterval(function() {
      if (!subscribedToStreamEvents &&
            this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
        subscribedToStreamEvents = true;
        this.broadcastContainer.addStreamEventListener(
            STREAM_EVENT_URL, 'eventItem', function(event) {
              this.onStreamEvent(event);
            }.bind(this));
        debugView.log('Subscribing to stream events');
        this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
      }
      …

האזנה לאירועים של שידורי HbbTV

יוצרים את השיטה HbbTVApp.onStreamEvent() כדי להאזין לאירועים של הפסקות למודעות: adBreakAnnounce, adBreakStart ו-adBreakEnd:

/**
 * Callback for HbbTV stream event.
 * @param {!Event} event Stream event payload.
 */
HbbTVApp.prototype.onStreamEvent = function(event) {
  var eventData = JSON.parse(event.text);
  var eventType = eventData.type;
  if (eventType == AD_BREAK_EVENT_ANNOUNCE) {
    this.onAdBreakAnnounce(eventData);
  } else if (eventType == AD_BREAK_EVENT_START) {
    this.onAdBreakStart(eventData);
  } else if (eventType == AD_BREAK_EVENT_END) {
    this.onAdBreakEnd(eventData);
  }
};
application.js

טיפול באירועים בסטרימינג של HbbTV

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

1. כדי לטעון את מניפסט רצף המודעות בתגובה לאירוע adBreakAnnounce, צריך ליצור את השיטה HbbTVApp.onAdBreakAnnounce():

   /**
    * Callback function on ad break announce stream event.
    * @param {!Event} event HbbTV stream event payload.
    */
   HbbTVApp.prototype.onAdBreakAnnounce = function(event) {
     var eventType = event.type;
     var eventDuration = event.duration;
     var eventOffset = event.offset;
     debugView.log(
         'HbbTV event: ' + eventType + ' duration: ' + eventDuration +
         's offset: ' + eventOffset + 's');
     this.adManager.loadAdPodManifest(NETWORK_CODE, CUSTOM_ASSET_KEY, eventDuration);
   };
   application.js

2. כדי לעבור להפעלה של רצף מודעות במהלך הפסקות הפרסום, צריך ליצור את השיטה HbbTVApp.onAdBreakStart():

   /**
    * Callback function on ad break start stream event.
    * @param {!Event} event HbbTV stream event payload.
    */
   HbbTVApp.prototype.onAdBreakStart = function(event) {
     debugView.log('HbbTV event: ' + event.type);
     if (!this.videoPlayer.isPreloaded()) {
       debugView.log('HbbTVApp: Switch aborted. ' +
                     'The ad preloading buffer is insufficient.');
       return;
     }
     this.stopBroadcast();
     this.videoPlayer.play();
   };
   application.js

3. כדי לחזור לשידור התוכן, יוצרים את שיטת HbbTVApp.onAdBreakEnd():

   /**
    * Callback function on ad break end stream event.
    * @param {!Event} event HbbTV stream event payload.
    */
   HbbTVApp.prototype.onAdBreakEnd = function(event) {
     debugView.log('HbbTV event: ' + event.type);
     this.videoPlayer.stop();
     this.resumeBroadcast();
   };
   application.js

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