Эта страница переведена с помощью Cloud Translation API.

Начало работы с IMA DAI SDK

IMA SDK упрощают интеграцию мультимедийной рекламы на ваши веб-сайты и приложения. IMA SDK могут запрашивать рекламу с любого рекламного сервера , совместимого с VAST, и управлять воспроизведением рекламы в ваших приложениях. С помощью SDK IMA DAI приложения отправляют потоковый запрос на рекламу и видеоконтент — либо VOD, либо контент в реальном времени. Затем SDK возвращает объединенный видеопоток, так что вам не придется управлять переключением между рекламой и видеоконтентом в вашем приложении.

Выберите решение DAI, которое вас интересует

Воспроизведение потоков VOD, зарегистрированных с помощью API Google Cloud Video Stitcher.

В этом руководстве показано, как использовать IMA DAI SDK для HTML5 для запроса и воспроизведения сеанса потокового видео по запросу Google Cloud .

Это руководство расширяет базовый пример из руководства по началу работы с IMA DAI.

Информацию об интеграции с другими платформами или использовании клиентских SDK IMA см. в разделе SDK Interactive Media Ads .

Чтобы просмотреть или проследить за завершенным примером интеграции, загрузите пример облачного видеосшивателя для HLS или DASH .

Настройка проекта Google Cloud

Настройте проект Google Cloud и настройте учетные записи служб для доступа к проекту .

Введите следующие переменные для использования в IMA SDK:

Расположение

Регион Google Cloud , в котором была создана ваша конфигурация VOD: LOCATION

Номер проекта

Номер проекта Google Cloud с использованием Video Stitcher API: PROJECT_NUMBER

Токен OAuth

Кратковременный токен OAuth сервисного аккаунта с ролью пользователя Video Stitcher:

OAUTH_TOKEN

Подробнее о создании недолговечных токенов OAuth читайте здесь. Токен OAuth можно повторно использовать в нескольких запросах, пока не истек срок его действия.

Сетевой код

Код сети Менеджера рекламы для запроса объявлений: NETWORK_CODE

Идентификатор конфигурации VOD

Идентификатор конфигурации VOD для потока VOD: VOD_CONFIG_ID

Подробнее о создании идентификатора конфигурации VOD читайте в руководстве по созданию облака для создания конфигурации VOD .

Настройка среды разработки

Примеры приложений IMA демонстрируют только запросы потока HLS. Вы по-прежнему можете использовать потоки DASH при создании класса VideoStitcherVodStreamRequest . При настройке проигрывателя, совместимого с DASH, вам необходимо настроить прослушиватель событий прогресса вашего видеопроигрывателя, который может предоставлять метаданные видео в StreamManager.processMetadata() . Эта функция принимает три параметра:

type : строка, для которой должно быть установлено значение 'ID3' для потоков HLS и 'urn:google:dai:2018' для потоков DASH.
data : для сообщений о событиях DASH это строка данных сообщения.
timestamp : число, обозначающее время начала сообщения о событии для потоков DASH.

Отправляйте метаданные как можно скорее и так часто, как это позволяют события вашего игрока. Если метаданные отсутствуют или неверны, IMA DAI SDK может не инициировать рекламные события, что приведет к неправильному сообщению о рекламных событиях.

Загрузите примеры IMA DAI для HTML5 и извлеките zip-файл примера hls_js/simple в новую папку. Этот пример представляет собой веб-приложение, которое вы можете разместить локально в целях тестирования.

Чтобы разместить пример локально, перейдите в новую папку и выполните следующую команду Python, чтобы запустить веб-сервер:

python3 -m http.server 8000

http.server доступен только в Python 3.x. Вы можете использовать любой другой веб-сервер, например HTTP-сервер Apache или Node JS.

Откройте веб-браузер и перейдите по адресу localhost:8000 чтобы увидеть видеоплеер. Ваш браузер должен поддерживать библиотеку HLS.js.

Если все работает правильно, при нажатии кнопки воспроизведения на видеоплеере начинается короткометражный фильм «Слезы стали» с рекламными паузами каждые 30 секунд.

Запросить поток VOD

Чтобы заменить образец потока потоком VOD, сшитым с рекламой, используйте класс VideoStitcherVodStreamRequest для автоматического создания рекламного сеанса с помощью Google Ad Manager. Вы можете использовать пользовательский интерфейс Google Ad Manager, чтобы найти сгенерированные сеансы DAI для мониторинга и отладки.

В существующем примере есть функции для запроса потока VOD или прямой трансляции. Чтобы он работал с API Google Cloud Video Stitcher, вам необходимо добавить новую функцию для возврата объекта VideoStitcherVodStreamRequest .

Вот пример:

// StreamManager which will be used to request DAI streams.
let streamManager;
...

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
    [
      google.ima.dai.api.StreamEvent.Type.LOADED,
      google.ima.dai.api.StreamEvent.Type.ERROR,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
    ],
    onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = "block";
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Перезагрузите страницу. Затем вы можете запросить и воспроизвести собственный поток VOD.

(Необязательно) Добавьте параметры сеанса потоковой передачи.

Настройте запрос потока, добавив параметры сеанса, чтобы переопределить конфигурацию API Cloud Video Stitcher по умолчанию, используя VideoStitcherVodStreamRequest.videoStitcherSessionOptions . Если вы укажете нераспознанный параметр, API Cloud Video Stitcher ответит ошибкой HTTP 400. Обратитесь за помощью к руководству по устранению неполадок .

Например, вы можете переопределить параметры манифеста с помощью следующего фрагмента кода, который запрашивает два манифеста потока с воспроизведением, упорядоченным от наименьшего битрейта к наибольшему.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Очистить

Теперь, когда вы успешно разместили поток VOD с помощью API Google Cloud Video Stitcher и запросили его с помощью IMA DAI SDK для HTML5, важно очистить все обслуживающие ресурсы.

Следуйте руководству по очистке VOD , чтобы удалить все ненужные ресурсы и активы.

Наконец, в окне терминала, где вы запустили веб-сервер Python 3, используйте команду ctrl+C чтобы завершить работу локального сервера.