Player-Klasse einrichten

Definiere in video_player.js eine Wrapper-Klasse für den Videoplayer, um den Dash.js-Player zu starten und zu steuern.

Breitbandplayer einrichten

Lege fest, wo in deiner App der Breitbandplayer platziert werden soll, indem du Video- und Wrapper-Tags erstellst:

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

Videoplayer erstellen

Initialisiere 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 zur Wiedergabesteuerung definieren

Um den Anzeigen-Player anzuzeigen und die Videoansicht anzuhängen, erstellen Sie die Methode VideoPlayer.play(). Erstellen Sie danach die Methode „create VideoPlayer.stop()“, um die Bereinigung nach Abschluss der Anzeigen-Pods zu verwalten.

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

Manifest des Anzeigenstreams vorab laden

Verwende VideoPlayer.preload() und VideoPlayer.isPreloaded(), damit Anzeigen während des Inhaltsstreams und vor Beginn der Werbeunterbrechung ausreichend geladen werden.

1. Anzeigenstream vorab laden

Erstelle die VideoPlayer.preload()-Methode, um das Manifest des Anzeigenstreams vorab zu laden und vor einer Werbeunterbrechung einen Anzeigenpuffer aufzubauen. Du musst die Streamingeinstellungen des Players von 'cacheInitSegments' auf true aktualisieren. Wenn Sie die Einstellungen aktualisieren, aktivieren Sie das Caching der Init-Segmente. 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. Vorab geladenen Anzeigenpuffer prüfen

Erstelle die Methode VideoPlayer.isPreloaded(), um zu prüfen, ob im Vergleich zu einem in der App festgelegten Puffergrenzwert genügend Anzeigenpuffer vorab geladen wurden:

// 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 du Ereignis-Listener für das Dash.js-Player-Ereignis hinzufügen möchtest, erstelle die Methode VideoPlayer.attachPlayerListener(): PLAYBACK_PLAYING, PLAYBACK_ENDED, LOG und ERROR. Mit dieser Methode werden auch Ereignisse für die URI der Schema-ID verarbeitet. Außerdem wird die Bereinigungsfunktion so festgelegt, dass diese Listener entfernt werden.

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 Spielerereignisse festlegen

Um die Wiedergabe des Anzeigen-Pods basierend auf Player-Ereignissen zu verwalten, 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

Setzer für das Ereignis onAdPodEnded erstellen

Legen Sie mit der Methode VideoPlayer.setOnAdPodEnded() eine Callback-Funktion fest, die ausgeführt wird, wenn ein Anzeigen-Pod endet. 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

Erstellen Sie die Methode VideoPlayer.setEmsgEventHandler(), um eine Callback-Funktion festzulegen, die auf EMSG-Ereignisse reagiert. Fügen Sie in dieser Anleitung den Parameter scope hinzu, 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 der Videoplayer während Werbeunterbrechungen eingeblendet und nach Ende der Werbeunterbrechung ausgeblendet werden soll, erstelle 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 Ad Manager-Klasse, um mit dem IMA SDK eine Streamanfrage zu senden, ein Manifest für den Anzeigen-Pod abzurufen, IMA-Stream-Ereignisse zu überwachen und Emsg-Ereignisse an das IMA SDK zu übergeben.

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