הגדרת מחלקת השחקנים

ב-video_player.js, מגדירים את הכיתה של מעטפת נגן הווידאו כדי להפעיל את נגן dash.js ולשלוט בו.

הגדרת הנגן ברוחב פס

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

<div id="broadband-wrapper">
    <video id="broadband-video"></video>
</div>
index.html

יצירת נגן הווידאו

מאתחלים את הכיתה של נגן הווידאו באמצעות משתנים לרכיבי HTML, לנגן dash.js ולפונקציות חזרה (callbacks) ששיטות אחרות של הכיתה יכולות להשתמש בהן.

/**
 * Video player wrapper class to control ad creative playback with dash.js in
 * broadband.
 */
var VideoPlayer = function() {
  this.videoElement = document.querySelector('video');
  this.broadbandWrapper = document.getElementById('broadband-wrapper');
  this.player = dashjs.MediaPlayer().create();
  this.onAdPodEndedCallback = null;

  // Function passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.onCustomEventHandler = null;
  //  Scope (this) passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.customEventHandlerScope = null;

  // Function to remove all of player event listeners.
  this.cleanUpPlayerListener = null;
  debugView.log('Player: Creating dash.js player');
};
video_player.js

הגדרת הפונקציות של בקרת ההפעלה

כדי להציג את נגן המודעות ולצרף את תצוגת הסרטון, יוצרים את השיטה VideoPlayer.play(). לאחר מכן, יוצרים את ה-method VideoPlayer.stop() כדי לטפל בניקוי אחרי שרצף המודעות מסתיים.

/** Starts playback of ad stream. */
VideoPlayer.prototype.play = function() {
  debugView.log('Player: Start playback');
  this.show();
  this.player.attachView(this.videoElement);
};

/** Stops ad stream playback and deconstructs player. */
VideoPlayer.prototype.stop = function() {
  debugView.log('Player: Request to stop player');
  if (this.cleanUpPlayerListener) {
    this.cleanUpPlayerListener();
  }
  this.player.reset();
  this.player.attachView(null);
  this.player.attachSource(null);
  this.player = null;
  this.hide();
};
video_player.js

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

כדי לוודא שהמודעות ייטענו מספיק במהלך שידור התוכן ולפני ההפסקה למודעות, השתמשו ב-VideoPlayer.preload() וב-VideoPlayer.isPreloaded().

1. טעינה מראש של מקור המודעה

יוצרים את השיטה VideoPlayer.preload() כדי לטעון מראש את המניפסט של מקור המודעות ולצבור מאגר מודעות לפני הפסקה למודעה. עליכם לעדכן את הגדרות הסטרימינג של הנגן 'cacheInitSegments' ל-true. עדכון ההגדרות מאפשר לשמור במטמון את הקטעים ההתחלתיים, וכך למנוע עיכובים במעבר למודעות.

/**
 * Starts ad stream prefetching into Media Source Extensions (MSE) buffer.
 * @param {string} url manifest url for ad stream playback.
 */
VideoPlayer.prototype.preload = function(url) {
  if (!this.player) {
    this.player = dashjs.MediaPlayer().create();
  }
  debugView.log('Player: init with ' + url);
  this.player.initialize(/* HTMLVideoElement */ null, url, /* autoplay */ true);

  this.player.updateSettings({
    'debug': {
      'logLevel': dashjs.Debug.LOG_LEVEL_WARNING,
      'dispatchEvent': true,  // flip to false to hide all debug events.
    },
    'streaming': {
      'cacheInitSegments': true,
    }
  });
  this.player.preload();
  this.attachPlayerListener();
  debugView.log('Player: Pre-loading into MSE buffer');
};
video_player.js

2. בדיקת מאגר המודעות שנטען מראש

יוצרים שיטה VideoPlayer.isPreloaded() כדי לבדוק אם נטענה מראש מספיק מאגר נתונים זמני של מודעות בהשוואה לסף מאגר הנתונים הזמני שהוגדר באפליקציה:

// Ads will only play with 10 or more seconds of ad loaded.
var MIN_BUFFER_THRESHOLD = 10;
video_player.js
 
/**
 * Checks if the ad is preloaded and ready to play.
 * @return {boolean} whether the ad buffer level is sufficient.
 */
VideoPlayer.prototype.isPreloaded = function() {
  var currentBufferLevel = this.player.getDashMetrics()
      .getCurrentBufferLevel('video', true);
  return currentBufferLevel >= MIN_BUFFER_THRESHOLD;
};
video_player.js

צירוף רכיבי listener לנגן

כדי להוסיף מאזינים לאירועים של נגן dash.js, יוצרים את השיטה VideoPlayer.attachPlayerListener(): PLAYBACK_PLAYING,‏ PLAYBACK_ENDED,‏ LOG ו-ERROR. השיטה הזו מטפלת גם באירועים של מזהה ה-URI של הסכימה, בנוסף להגדרת פונקציית הניקוי להסרת המאזינים האלה.

var SCHEME_ID_URI = 'https://developer.apple.com/streaming/emsg-id3';
video_player.js
 
/** Attaches event listener for various dash.js events.*/
VideoPlayer.prototype.attachPlayerListener = function() {
  var playingHandler = function() {
    this.onAdPodPlaying();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
  var endedHandler = function() {
    this.onAdPodEnded();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
  var logHandler = function(e) {
    this.onLog(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['LOG'], logHandler);
  var errorHandler = function(e) {
    this.onAdPodError(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['ERROR'], errorHandler);

  var customEventHandler = null;
  if (this.onCustomEventHandler) {
    customEventHandler =
        this.onCustomEventHandler.bind(this.customEventHandlerScope);
    this.player.on(SCHEME_ID_URI, customEventHandler);
  }

  this.cleanUpPlayerListener = function() {
    this.player.off(
        dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
    this.player.off(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
    this.player.off(dashjs.MediaPlayer.events['LOG'], logHandler);
    this.player.off(dashjs.MediaPlayer.events['ERROR'], errorHandler);
    if (customEventHandler) {
      this.player.off(SCHEME_ID_URI, customEventHandler);
    }
  };
};
video_player.js

הגדרת קריאה חוזרת (callbacks) של אירועי שחקן

כדי לנהל את ההפעלה של רצף המודעות על סמך אירועים בנגן, יוצרים את השיטות VideoPlayer.onAdPodPlaying(),‏ VideoPlayer.onAdPodEnded() ו-VideoPlayer.onAdPodError():

/**
 * Called when ad stream playback buffered and is playing.
 */
VideoPlayer.prototype.onAdPodPlaying = function() {
  debugView.log('Player: Ad Playback started');
};

/**
 * Called when ad stream playback has been completed.
 * Will call the restart of broadcast stream.
 */
VideoPlayer.prototype.onAdPodEnded = function() {
  debugView.log('Player: Ad Playback ended');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};

/**
 * @param {!Event} event The error event to handle.
 */
VideoPlayer.prototype.onAdPodError = function(event) {
  debugView.log('Player: Ad Playback error from dash.js player.');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};
video_player.js

יצירת ה-setter לאירוע onAdPodEnded

כדי להגדיר פונקציית קריאה חוזרת שתופעל כשרצף המודעות מסתיים, יוצרים את השיטה VideoPlayer.setOnAdPodEnded(). סיווג האפליקציה משתמש בשיטה הזו כדי להמשיך את שידור התוכן אחרי הפסקות למודעות.

/**
 * Sets a callback function for when an ad pod has ended.
 * @param {!Function} callback Callback function.
 */
VideoPlayer.prototype.setOnAdPodEnded = function(callback) {
  this.onAdPodEndedCallback = callback;
};
video_player.js

טיפול באירועי מטא-נתונים של שידור

כדי להגדיר פונקציית קריאה חוזרת (callback) שפועלת על סמך אירועי emsg, יוצרים את השיטה VideoPlayer.setEmsgEventHandler(). במדריך הזה, הוסיפו את הפרמטר scope, כדי לגרום ל-setEmsgEventHandler() מחוץ ל-video_player.js.

/**
 * Sets emsg event handler.
 * @param {!Function} customEventHandler Event handler.
 * @param {!Object} scope JS scope in which event handler function is called.
 */
VideoPlayer.prototype.setEmsgEventHandler = function(
    customEventHandler, scope) {
  this.onCustomEventHandler = customEventHandler;
  this.customEventHandlerScope = scope;
};
video_player.js

הצגה והסתרה של נגן הווידאו להפסקות למודעות

כדי להציג את נגן הווידאו בהפסקות למודעות ולהסתיר אותו בסיום ההפסקה למודעות, יוצרים את השיטות VideoPlayer.show() ו-VideoPlayer.hide():

/** Shows the video player. */
VideoPlayer.prototype.show = function() {
  debugView.log('Player: show');
  this.broadbandWrapper.style.display = 'block';
};

/** Hides the video player. */
VideoPlayer.prototype.hide = function() {
  debugView.log('Player: hide');
  this.broadbandWrapper.style.display = 'none';
};
video_player.js

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

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