Konfigurowanie klasy gracza

W video_player.js zdefiniuj klasę kodu odtwarzacza wideo, która będzie inicjować i kontrolować odtwarzacz dash.js.

Konfigurowanie odtwarzacza szerokopasmowego

Określ, gdzie w aplikacji umieścić odtwarzacz internetowy, tworząc tagi wideo i tagi opakowania:

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

Tworzenie odtwarzacza

Inicjalizacja klasy odtwarzacza wideo za pomocą zmiennych dla elementów HTML, odtwarzacza dash.js i wywołań zwrotnych, których mogą używać inne metody klasy.

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

Definiowanie funkcji sterowania odtwarzaniem

Aby wyświetlić odtwarzacz reklamy i dołączyć widok filmu, utwórz metodę VideoPlayer.play(). Następnie utwórz metodę create VideoPlayer.stop(), aby obsłużyć sprzątanie po zakończeniu działania modułów reklamowych.

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

Wczytaj wstępnie plik manifestu strumienia reklam.

Aby mieć pewność, że reklamy są wystarczająco ładowane podczas strumienia treści i przed rozpoczęciem przerwy na reklamę, użyj właściwości VideoPlayer.preload() i VideoPlayer.isPreloaded().

1. Wstępnie wczytuj strumień reklam

Utwórz metodę VideoPlayer.preload(), by wstępnie wczytać plik manifestu strumienia reklam i utworzyć bufor reklamowy przed przerwą na reklamę. Musisz zmienić 'cacheInitSegments'ustawienia strumieniowego przesyłania odtwarzacza na true. Zmieniając ustawienia, włączasz segmenty inicjowane w pamięci podręcznej, co pozwala uniknąć opóźnień przy przełączaniu się na reklamy.

/**
 * 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. Sprawdzanie zasobnika wstępnie załadowanych reklam

Utwórz metodę VideoPlayer.isPreloaded(), aby sprawdzić, czy wstępnie załadowano wystarczającą ilość bufora reklam w porównaniu z progiem buforowym określonym w aplikacji:

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

Dołączanie słuchaczy odtwarzacza

Aby dodać detektory zdarzeń dla zdarzenia odtwarzacza dash.js, utwórz metodę VideoPlayer.attachPlayerListener(): PLAYBACK_PLAYING, PLAYBACK_ENDED, LOG i ERROR. Ta metoda obsługuje też zdarzenia identyfikatora URI identyfikatora schematu, a nie tylko ustawia funkcję czyszczenia usuwającą te detektory.

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

Ustaw wywołania zwrotne zdarzeń odtwarzacza

Aby zarządzać odtwarzaniem bloku reklamowego na podstawie zdarzeń odtwarzacza, utwórz metody VideoPlayer.onAdPodPlaying(), VideoPlayer.onAdPodEnded() i 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

Tworzenie metody ustawiającej dla zdarzenia onAdPodEnded

Utwórz funkcję wywołania zwrotnego, która działa po zakończeniu podgrupy reklam, tworząc metodę VideoPlayer.setOnAdPodEnded(). Klasa aplikacji używa tej metody do wznawiania transmisji treści po przerwach na reklamę.

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

Obsługa zdarzeń metadanych strumienia

Utwórz funkcję wywołania zwrotnego, która działa na podstawie zdarzeń emsg, tworząc metodę VideoPlayer.setEmsgEventHandler(). Na potrzeby tego przewodnika uwzględnij parametr scope, gdy wywołujesz setEmsgEventHandler() poza 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

wyświetlać i ukrywać odtwarzacz podczas przerw na reklamy.

Aby wyświetlać odtwarzacz wideo podczas przerw na reklamę i ukrywać go po zakończeniu przerwy, utwórz metody VideoPlayer.show() i 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

Następnie utwórz klasę menedżera reklam, aby za pomocą pakietu IMA SDK wysłać żądanie strumienia, uzyskać plik manifestu bloku reklamowego, nasłuchiwać zdarzeń strumienia IMA i przekazywać zdarzenia emsg do pakietu IMA SDK.

Wstecz
Pierwsze kroki w HbbTV
Dalej
Utwórz zajęcia w Menedżerze reklam