Diese Seite wurde von der Cloud Translation API übersetzt.

Anzeigenregeln

Das IMA HTML5 SDK unterstützt vollständig automatisierte Anzeigenplaylists. Diese Funktion fügt Werbeunterbrechungen in den Content ein, wie unter Google Ad Manager beim Trafficking Ihrer Anzeigen. Außerdem wird der Code des Videoplayers stark vereinfacht. die zur Unterstützung von Werbeunterbrechungen wie Pre-Rolls, Mid-Rolls und Post-Rolls erforderlich sind.

Beim Erstellen der AdsManager wird ein contentPlayback wird mit dem getAdsManager-Objekt übergeben. aufrufen. Dieses Objekt muss haben ein currentTime-Attribut, das den aktuellen Abspielkopf zurückgibt. die Position des Videos. Wenn Sie ein HTML5-video-Element für Content anzuzeigen, können Sie dieses Element einfach an das SDK übergeben. Dieses Objekt wird der Fortschritt der Content-Wiedergabe erfasst, damit Werbeunterbrechungen automatisch zu den in Ad Manager angegebenen Zeiten eingefügt werden. Außerdem müssen die SDK wissen, dass es den Inhaltsstatus in Ihrem Namen verarbeiten soll.
```
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for
    
    contentPlayback.
```

Damit Post-Roll-Anzeigen wiedergegeben werden, musst du dem SDK mitteilen, abgeschlossen ist. Dies ist etwas schwierig, da das SDK in einigen Fällen Ihr Video verwendet. zum Abspielen von Anzeigen. Das SDK muss nur darüber informiert werden, erst am Ende des Contents und nicht am Ende einer Anzeige. Dazu können Sie die Code unten:

var videoContent = document.getElementById('contentElement');
var contentEndedListener = function() {adsLoader.contentComplete();};

videoContent.addEventListener('ended', contentEndedListener);

function onContentPauseRequested() {
  contentElement.removeEventListener('ended', contentEndedListener);
  ...
}

function onContentResumeRequested() {
  contentElement.addEventListener('ended', contentEndedListener);
  ...
}

Das CONTENT_PAUSE_REQUESTED und CONTENT_RESUME_REQUESTED -Ereignisse werden verwendet, um den Content bei der Wiedergabe von Werbeunterbrechungen zu pausieren und fortzusetzen.
Wenn Ihr Videoplayer Drag-to-Seek unterstützt und die aktuelle Zeiteigenschaft wird der Videoplayer aktualisiert, während der Nutzer zieht, kann das SDK nicht zwischen zwischen Inhalten, die normal weiterlaufen, und einem Nutzer, der die Inhalte durchsucht. Du musst ein benutzerdefiniertes contentWiedergabe-Objekt als Parameter für getAdsManager verwenden. Ein Beispiel für diesen Anwendungsfall finden Sie in diesem Blogartikel.

Hinweis:Wenn der Inhalt abgespielt wurde oder Der Nutzer hat die Wiedergabe gestoppt. Rufen Sie AdsLoader.contentComplete auf. um dem SDK zu signalisieren, dass der Inhalt fertig ist. Das SDK gibt dann die Post-Roll-Werbeunterbrechung, falls eine geplant wurde Das ALL_ADS_COMPLETED wird ausgelöst, wenn ALLE Werbeunterbrechungen wiedergegeben wurden. Beachten Sie außerdem, dass das Inhalts-Tracking beginnt, wenn init() aufgerufen wird. Sie sollten immer init() aufrufen, bevor Inhalte wiedergegeben werden.

Automatische Wiedergabe von Werbeunterbrechungen deaktivieren

Unter Umständen müssen Sie verhindern, dass das SDK Werbeunterbrechungen wiedergibt, bis sind Sie bereit für sie. In diesem Fall kannst du die automatische Wiedergabe von Werbeunterbrechungen deaktivieren. . Damit wird vom SDK nach dem Laden einer Werbeunterbrechung ein AD_BREAK_READY-Ereignis. Wenn der Player bereit für die Werbeunterbrechung ist, können Sie adsManager.start() aufrufen:

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

Jetzt ausprobieren

Unten sehen Sie eine funktionierende Implementierung.

Das Problem beim Suchen

Wenn Sie Anzeigenregeln verwenden, treten möglicherweise Probleme bei der Suche per Klick und Ziehen auf. Wenn ein Nutzer auf ein Video klickt und zieht, Mid-Roll-Pods eingeblendet werden, sehen sie möglicherweise, dass zwei oder mehr dieser Pods unmittelbar nacheinander wiedergegeben werden, wenn der Inhalt wieder aufgenommen wird. Der Grund dafür ist, dass die Zeit für den Abspielkopf des Videos aktualisiert wird, während der die der Nutzer sucht; Ob das SDK die aktuelle Zeit abfragt, während der Nutzer über eine Anzeige hinausgeht, denkt sie möglicherweise, dass diese Anzeige wiedergegeben werden sollte. Wenn der Inhalt wird diese Anzeige und dann die letzte seit der Suche wiedergegeben. Für eine visuelle Darstellung dieses Problems, siehe folgendes Diagramm:

Die einfache Lösung besteht darin, beim Start der App die aktuelle Zeit zu sparen. und melden diesen Zeitpunkt, wenn das SDK danach fragt, setzt die normale Wiedergabe fort. Eine visuelle Darstellung dieser Lösung finden Sie in der Diagramm unten:

Bei dieser Lösung überspringen Sie die Mid-Roll-Anzeige im Format 0:10 richtig und spielen nur die Mid-Roll-Anzeige im Format 0:20 ab. Dazu wird ein benutzerdefinierter Abspielkopf-Tracker verwendet (siehe unten). Der folgende Code enthält Änderungen (fett dargestellt) von ads.js in der erweiterten HTML5-Version in unserer Downloadseite.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Bekannte Probleme bei Safari für Mobilgeräte

Diese Methode sollte mit Ausnahme der mobilen Safari auf allen Plattformen funktionieren. Auf Mobilgeräten Safari die Sucheigenschaft des Video-Tags nicht ordnungsgemäß implementiert wurde (sie gibt immer false zurück). Um das zu umgehen, musst du selbst ob der Nutzer das Video durchsucht. Der Beispielcode für diese Methode folgt. Auch hier handelt es sich um Änderungen am vorhandenen Code, die unten fett hervorgehoben sind.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Mit diesen Änderungen verwendet das SDK jetzt das Attribut „currentTime“ deines Ads. Objekt, um zu bestimmen, wann Werbeunterbrechungen wiedergegeben werden sollen, und nicht die Eigenschaft currentTime des Content-Videoplayer.