Пакет IMA DAI SDK поддерживает интеграцию в минималистичное приложение видеоплеера HbbTV. IMA DAI SDK позволяет Google Ad Manager запрашивать широкополосный рекламный поток для сопровождения транслируемого контента. В этом руководстве рассматривается загрузка манифеста объявления на основе данных о событиях рекламы из транслируемого потока.
Чтобы просмотреть или использовать готовый пример интеграции, загрузите пример приложения HbbTV Linear с IMA HTML5 DAI SDK . Для поддержки старых телевизоров это руководство и пример приложения GitHub написаны на ES5 JavaScript.
Информацию об интеграции с другими платформами, отличными от HbbTV, см. в разделе Interactive Media Ads SDKs .
Предпосылки
Прежде чем продолжить работу с этим руководством, убедитесь, что у вас есть следующее:
- Для использования IMA DAI вам потребуется расширенная учётная запись Ad Manager 360. Если у вас есть учётная запись Ad Manager, обратитесь к своему менеджеру для получения дополнительной информации. Информацию о регистрации в Ad Manager можно найти в Справочном центре Ad Manager .
- Приложение HbbTV, взаимодействующее с объектом вещания для воспроизведения медиаконтента. Подробнее см. в разделе Объект AV вещания HbbTV .
- Версия dash.js с поддержкой предварительной загрузки. Рекомендуем использовать версию 4.6.0 или более позднюю.
- Веб-сервер для размещения приложения.
- Тестовая среда с потоком DVB-вещания. Подробные инструкции по настройке тестовой среды см. в разделе «Запуск приложения HbbTV» .
- Трансляция : подготовка трансляции, содержащей данные пользовательской таблицы информации приложения (AIT). Вам также потребуется способ передачи трансляции для приёма на телевизор. Для передачи трансляции можно использовать DVB-модулятор или другие методы.
- Веб-сервер : разместите приложение HbbTV на веб-сервере, доступном для телевизора.
- Событие прямой трансляции типа Pod, обслуживающее манифест . Чтобы создать событие, см. раздел Настройка прямой трансляции для DAI .
Создайте совместимый поток вещания
Ваше приложение HbbTV использует broadcastContainer.addStreamEventListener() для прослушивания событий HbbTV-потока в вашем трансляционном потоке. Для корректной загрузки и воспроизведения рекламы необходимо настроить трансляционный поток со следующими типами событий, включив соответствующую полезную нагрузку в виде строки JSON:
-
AD_BREAK_EVENT_ANNOUNCE-{"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10} -
AD_BREAK_EVENT_START-{"type":"adBreakStart"} -
AD_BREAK_EVENT_END-{"type":"adBreakEnd"}
Для этих событий включите полезную нагрузку в виде строки JSON с streamEvent.type . Для поддержки предварительной загрузки рекламы событие AD_BREAK_EVENT_ANNOUNCE должно включать streamEvent.duration и streamEvent.offset . Подробнее см. в разделе Прослушивание событий потока HbbTV . Чтобы настроить поток вещания, см. пример мультиплексированного транспортного потока MPEG . Чтобы использовать пример потока, необходимо обновить URL-адрес таблицы информации о приложении для вашей настройки потока.
Создайте модуль для проведения прямых трансляций
Для показа рекламы в приложении HbbTV вам понадобится модуль, обслуживающий событие прямой трансляции. Подробнее о настройке события см. в статье «Настройка прямой трансляции для DAI» . Для доступа к настроенной вами трансляции в приложении должны быть следующие переменные:
-
NETWORK_CODE: сетевой код Менеджера рекламы для запроса рекламы. -
CUSTOM_ASSET_KEY: пользовательский ключ актива Менеджера рекламы, сгенерированный в процессе настройки прямой трансляции для DAI.
Создайте структуру файла приложения
В этом руководстве используется структура файла, аналогичная структуре примера приложения IMA HbbTV . Чтобы следовать этому руководству, создайте следующие файлы:
-
index.html: HTML-индекс для вашего приложения. -
Style.css: CSS-стили для вашего приложения. -
application.js: Основная точка входа JS. Управляет состоянием воспроизведения и рекламными паузами. -
video_player.js: управляет проигрывателем dash.js, используемым для воспроизведения рекламы. -
ads_manager.js: управляет настройкой IMA, запросом потока и обработкой событий.
ads_manager.js настраивает IMA DAI SDK. Следующие компоненты реализуют IMA DAI SDK:
-
PodStreamRequest: объект, определяющий потоковый запрос к рекламным серверам Google. -
StreamManager: объект, который обрабатывает потоки динамической вставки рекламы и взаимодействует с бэкендом DAI. Менеджер потоков также обрабатывает запросы отслеживания и пересылает события потоков и рекламы издателю.
Подробные инструкции по настройке среды тестирования см. в этом руководстве по запуску приложения HbbTV .
Загрузите IMA DAI SDK и DASH.js
Чтобы начать воспроизведение трансляции рекламы, загрузите IMA DAI SDK и dash.js в своё приложение. Перед тегом application.js добавьте dash.js и фреймворк IMA, используя теги script в index.html .
Затем создайте класс-оболочку видеоплеера для инициализации и управления проигрывателем dash.js.