Как автоматизировать создание плейлистов с рекламой

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

• При создании объекта AdsManager объект contentPlayback передается с помощью вызова getAdsManager. У этого объекта должно быть свойство currentTime, которое возвращает текущую позицию воспроизведения видео. Если вы используете элемент HTML5 video для показа контента, вы можете просто передать этот элемент в 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 не может отличить нормальное воспроизведение контента от перемотки. В качестве параметра для getAdsManager необходимо использовать специальный объект contentPlayback. Пример такого варианта использования приведен в разделе Проблема с перемоткой.

Примечание. Когда контент будет воспроизведен до конца или пользователь остановит воспроизведение, обязательно вызовите 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();
}

Попробовать

Ниже приведен пример кода.

Проблемы с перемоткой

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

Сохраните текущее время, когда пользователь начинает перемотку, и передавайте его по запросу SDK, пока не возобновится обычное воспроизведение. Визуальное представление этого решения показано на следующей диаграмме.

В этом случае вы правильно пропустите рекламу в середине видео на 10-й секунде и воспроизведете только рекламу на 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 свойство seeking тега video реализовано неправильно (оно всегда возвращает значение 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 видеопроигрывателя.