Player-Klasse einrichten

Definieren Sie in video_player.js eine Wrapper-Klasse für den Videoplayer, um den dash.js-Player zu initialisieren und zu steuern.

Breitbandplayer einrichten

Legen Sie fest, wo in Ihrer App der Breitbandplayer platziert werden soll, indem Sie Video- und Wrapper-Tags erstellen:

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

Videoplayer erstellen

Initialisieren Sie die Videoplayer-Klasse mit Variablen für HTML-Elemente, den dash.js-Player und Callbacks, die von anderen Klassenmethoden verwendet werden können.

/**
 * 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

Funktionen für die Wiedergabesteuerung definieren

Erstellen Sie die VideoPlayer.play()-Methode, um den Anzeigenplayer zu präsentieren und die Videoaufrufe zu erfassen. Erstellen Sie anschließend die Methode VideoPlayer.stop(), um die Bereinigung nach Abschluss der Anzeigen-Pods zu verarbeiten.

/** 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

Anzeigenstream-Manifest vorab laden

Verwenden Sie VideoPlayer.preload() und VideoPlayer.isPreloaded(), um zu prüfen, ob Anzeigen während des Contentstreams und vor Beginn der Werbeunterbrechung ausreichend geladen werden.

1. Anzeigenstream vorab laden

Erstellen Sie die VideoPlayer.preload()-Methode, um das Manifest des Anzeigenstreams vorzuladen und vor einer Werbeunterbrechung einen Anzeigenpuffer aufzubauen. Du musst die Streaming-Einstellungen für den Player 'cacheInitSegments' auf true aktualisieren. Durch das Aktualisieren der Einstellungen wird das Caching der Initialisierungssegmente aktiviert. Dadurch werden Verzögerungen beim Wechsel zu Anzeigen vermieden.

/**
 * 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. Puffer für vorab geladene Anzeigen prüfen

Erstellen Sie die VideoPlayer.isPreloaded()-Methode, um zu prüfen, ob im Vergleich zu einem in der App festgelegten Pufferschwellenwert genügend Anzeigenpuffer vorab geladen wurde:

// 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

Player-Listener anhängen

Wenn Sie Event-Listener für das dash.js-Player-Ereignis hinzufügen möchten, erstellen Sie die Methode VideoPlayer.attachPlayerListener(): PLAYBACK_PLAYING, PLAYBACK_ENDED, LOG und ERROR. Diese Methode verarbeitet auch Ereignisse für den URI der Schema-ID und legt die Bereinigungsfunktion zum Entfernen dieser Listener fest.

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 für Player-Ereignisse festlegen

Wenn Sie die Wiedergabe von Anzeigen-Pods anhand von Player-Ereignissen verwalten möchten, erstellen Sie die Methoden VideoPlayer.onAdPodPlaying(), VideoPlayer.onAdPodEnded() und 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 für das onAdPodEnded-Ereignis erstellen

Legen Sie eine Callback-Funktion fest, die ausgeführt wird, wenn ein Ad-Pod endet, indem Sie die Methode VideoPlayer.setOnAdPodEnded() erstellen. Die App-Klasse verwendet diese Methode, um die Übertragung von Inhalten nach Werbeunterbrechungen fortzusetzen.

/**
 * 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

Streammetadaten-Ereignisse verarbeiten

Legen Sie eine Callback-Funktion fest, die basierend auf emsg-Ereignissen ausgeführt wird, indem Sie die Methode VideoPlayer.setEmsgEventHandler() erstellen. Fügen Sie für diese Anleitung den Parameter scope ein, da Sie setEmsgEventHandler() außerhalb von video_player.js aufrufen.

/**
 * 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 für Werbeunterbrechungen ein- und ausblenden

Wenn Sie den Videoplayer während Werbeunterbrechungen einblenden und nach Ende der Werbeunterbrechung ausblenden möchten, erstellen Sie die Methoden VideoPlayer.show() und 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

Erstellen Sie als Nächstes eine Anzeigenmanager-Klasse, um mit dem IMA SDK eine Streamanfrage zu senden, ein Anzeigenblock-Manifest abzurufen, auf IMA-Streamereignisse zu warten und emsg-Ereignisse an das IMA SDK zu übergeben.

Zurück
Erste Schritte auf HbbTV
Weiter
Ad Manager-Klasse erstellen