Изображение плаката аудиорекламы

В этом руководстве показано, как использовать IMA HTML5 SDK для наложения видеопроигрывателя на изображение постера при воспроизведении аудиообъявлений. Его следует использовать, если в запросе URL-адреса VAST установлено ad_type=audio_video . Это позволит улучшить монетизацию рекламы, поскольку как аудио, так и видеообъявления допускаются к показу и являются полноценными. Дополнительную информацию см. в документации ad_type и разделе «Аудио в видеоконтенте» .

Вы можете следовать этому руководству, внося изменения в базовую интеграцию IMA, или просмотреть пример приложения со звуком в видео для полной интеграции с этой функцией.

Предварительные условия

• Приложение, реализующее IMA HTML5 SDK для видеорекламы. Дополнительную информацию см. в руководстве по началу работы с HTML5 IMA .
• Изображение плаката по умолчанию, которое накладывается на видеопроигрыватель, когда аудиообъявление показывается без соответствующего наложения изображения. Чтобы изображение поместилось в видеоплеере, его ширина должна быть меньше или равна ширине видеоплеера, а его высота должна быть как минимум на 75 пикселей меньше, чем у видеоплеера.

Включите функцию изображения постера

Прежде чем отправлять запрос на аудио- и видеообъявление, установите для флага функции audioPosterImageEnabled значение true , а для флага функции audioPosterImageDefaultUrl укажите URL-адрес изображения плаката по умолчанию. Сделайте это с помощью API ImaSdkSettings.setFeatureFlags() перед созданием AdDisplayContainer . Если этот параметр установлен и воспроизводится аудиообъявление, IMA автоматически накладывает изображение, связанное с объявлением, поверх видеопроигрывателя. IMA выбирает самое большое доступное изображение сопутствующего объявления, которое помещается в видеопроигрыватель и как минимум на 75 пикселей короче видеопроигрывателя. Если VAST объявления не содержит изображения, которое IMA может использовать в качестве наложения, IMA использует указанное вами изображение по умолчанию в качестве наложения.

function initializeIMA() {
  console.log('initializing IMA');
  adContainer = document.getElementById('ad-container');
  google.ima.settings.setFeatureFlags(
    {
      'audioPosterImageEnabled': true,
      'audioPosterImageDefaultUrl':'http://your-ad-overlay/image.png'
    });
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

  // Let the AdsLoader know when the video has ended
  videoElement.addEventListener('ended', function() {
    adsLoader.contentComplete();
  });

  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'http://your-audio-video-ad-tag';
  ...
  // Pass the request to the adsLoader to request ads
  adsLoader.requestAds(adsRequest);
}