Правила рекламы

IMA HTML5 SDK поддерживает полностью автоматизированные плейлисты с рекламой. Эта функция вставляет рекламные паузы в контент, как указано в Google Ad Manager при размещении ваших объявлений. Это также значительно упрощает код видеоплеера, необходимый для поддержки рекламных пауз, включая предварительные, средние и последующие ролики.

  • При создании AdsManager объект contentPlayback передается через вызов getAdsManager . Этот объект должен иметь свойство currentTime , которое возвращает текущую позицию точки воспроизведения видео. Если вы используете video HTML5 для отображения контента, вы можете просто передать этот элемент в SDK. Этот объект используется для отслеживания хода воспроизведения контента, поэтому рекламные паузы автоматически вставляются в время, указанное в Менеджере рекламы. Вам также необходимо сообщить SDK, что вы хотите, чтобы он обрабатывал состояние контента от вашего имени.
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for
    
    contentPlayback.
  • Чтобы обеспечить воспроизведение пост-роллов, вам необходимо сообщить SDK, когда ваш контент будет завершен. Это немного сложно, потому что в некоторых случаях SDK использует ваш видеопроигрыватель для воспроизведения рекламы, поэтому вам нужно убедиться, что вы сообщаете SDK только о завершении вашего контента, а не о завершении рекламы. Вы можете сделать это, используя код ниже:
    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);
  ...
}
  • События CONTENT_PAUSE_REQUESTED и CONTENT_RESUME_REQUESTED используются для приостановки и возобновления контента при воспроизведении рекламных пауз.
  • Если ваш видеопроигрыватель поддерживает перетаскивание и свойство текущего времени видеопроигрывателя обновляется во время перетаскивания пользователем, SDK не сможет отличить нормальное продвижение контента от того, что пользователь просматривает контент. Вы должны использовать собственный объект contentPlayback в качестве параметра для getAdsManager . Пример этого варианта использования см. в разделе «Проблемы с поиском» .

Примечание. Когда воспроизведение контента завершилось или пользователь остановил воспроизведение, обязательно вызовите AdsLoader.contentComplete, чтобы сообщить SDK о том, что воспроизведение контента завершено. Затем SDK воспроизводит рекламную паузу после ролика, если она запланирована. Событие ALL_ADS_COMPLETED возникает, когда были воспроизведены ВСЕ рекламные паузы. Кроме того, обратите внимание, что отслеживание контента начинается при вызове init() , и вам всегда следует вызывать init() перед воспроизведением контента.

Отключение автоматического воспроизведения рекламных пауз

В некоторых случаях вам может потребоваться запретить SDK воспроизводить рекламные паузы, пока вы не будете к ним готовы. В этом сценарии вы можете отключить автоматическое воспроизведение рекламных пауз, чтобы сообщить SDK, когда вы готовы к воспроизведению рекламной паузы. При такой конфигурации после загрузки рекламной паузы SDK запускает событие AD_BREAK_READY . Когда ваш плеер готов к запуску рекламной паузы, вы можете вызватьadsManager.start(): 

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();
}

Попробуйте это

Ниже вы можете увидеть рабочую реализацию.

Проблема с поиском

Если вы используете правила для рекламы, у вас может возникнуть проблема с поиском с помощью щелчка и перетаскивания. В частности, после того, как пользователь щелкает и перетаскивает видео мимо нескольких модулей в середине ролика, он может увидеть, как 2 или более из этих модулей воспроизводятся последовательно, прежде чем контент возобновится. Это вызвано обновлением времени воспроизведения видео во время поиска пользователем; если SDK запрашивает текущее время, пока пользователь просматривает рекламу, он может подумать, что рекламу следует воспроизвести. Когда контент возобновляется, воспроизводится это объявление, а затем самое последнее объявление с момента поиска. Наглядное представление этой проблемы см. на диаграмме ниже:

Простой способ решить эту проблему — сохранить текущее время, когда пользователь начинает поиск, и сообщать об этом времени, когда SDK запрашивает это, пока пользователь не возобновит нормальное воспроизведение. Наглядное представление этого решения см. на диаграмме ниже:

Используя это решение, вы правильно пропускаете середину ролика 0:10 и воспроизводите только середину ролика 0:20. Это делается с помощью специального трекера точки воспроизведения, как показано ниже. Приведенный ниже код содержит модификации (выделены жирным шрифтом) ads.js в расширенном образце HTML5, доступном на нашей странице загрузки . 

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_);
};

Известные проблемы с мобильным Safari

Этот метод должен работать на любой платформе, кроме мобильного Safari. В мобильном Safari свойство поиска тега видео реализовано неправильно (оно всегда возвращает false). Чтобы обойти эту проблему, вам нужно провести собственную проверку, чтобы узнать, ищет ли пользователь видео. Ниже приведен пример кода для этого метода. Опять же, выделенные жирным шрифтом строки ниже представляют собой модификации существующего кода.

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_);
};

Благодаря этим изменениям SDK теперь использует свойство currentTime вашего объекта Ads , чтобы определять, когда воспроизводить рекламные паузы, а не свойство currentTime видеопроигрывателя контента.