SDK IMA DAI поддерживает интеграцию в минимальное приложение видеоплеера HbbTV. SDK IMA DAI позволяет Google Ad Manager запрашивать поток широкополосной рекламы для сопровождения транслируемого контента. В этом руководстве рассматривается загрузка манифеста рекламы на основе данных о событиях рекламы из транслируемого потока.
Чтобы просмотреть или проследить за выполнением готовой интеграции, загрузите демонстрационное приложение HbbTV Linear с SDK IMA HTML5 DAI . Для поддержки более старых телевизионных устройств это руководство и демонстрационное приложение на GitHub написаны на JavaScript ES5.
Для получения информации об интеграции с другими платформами, отличными от HbbTV, см. SDK для интерактивной рекламы .
Предварительные требования
Прежде чем продолжить выполнение инструкций, убедитесь, что у вас есть следующее:
- Для использования IMA DAI вам необходима учетная запись Ad Manager 360 Advanced . Если у вас уже есть учетная запись Ad Manager, обратитесь к своему менеджеру по работе с клиентами за дополнительной информацией. Информацию о регистрации в Ad Manager можно найти в Справочном центре Ad Manager .
- Приложение HbbTV, взаимодействующее с объектом трансляции для воспроизведения медиафайлов. Для получения более подробной информации см. объект HbbTV Broadcast AV .
- Версия dash.js, поддерживающая предварительную загрузку. Рекомендуем использовать версию 4.6.0 или более позднюю.
- Веб-сервер для размещения приложения.
- Тестовая среда с потоковым вещанием DVB. Подробные инструкции по настройке тестовой среды см. в разделе «Запуск приложения HbbTV» .
- Трансляционный поток : Подготовьте трансляционный поток, содержащий пользовательские данные таблицы информации о приложении (AIT). Вам также потребуется способ передачи трансляционного потока для приема телевизором. Для передачи трансляционного потока можно использовать DVB-модулятор или другие методы.
- Веб-сервер : Разместите приложение HbbTV на веб-сервере, доступном для телевизора.
- Событие прямой трансляции с типом манифеста обслуживания подов . Чтобы создать событие, см. раздел «Настройка прямой трансляции для 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: Сетевой код Ad Manager для запроса рекламы. -
CUSTOM_ASSET_KEY: Пользовательский ключ ресурса Ad Manager, сгенерированный в процессе настройки прямой трансляции для DAI.
Создайте файловую структуру приложения.
В этом руководстве используется структура файлов, аналогичная структуре демонстрационного приложения IMA HbbTV . Чтобы следовать этому руководству, создайте следующие файлы:
-
index.html: HTML-индекс вашего приложения. -
Style.css: CSS-стили для вашего приложения. -
application.js: Основная точка входа в JavaScript. Управляет состоянием воспроизведения и рекламными паузами. -
video_player.js: Управляет плеером dash.js, используемым для воспроизведения рекламы. -
ads_manager.js: Управляет настройкой IMA-интерфейса, запросом потока и обработкой событий.
ads_manager.js настраивает SDK IMA DAI. Следующие компоненты реализуют SDK IMA DAI:
-
PodStreamRequest: Объект, определяющий запрос потока данных на рекламные серверы Google. -
StreamManager: Объект, обрабатывающий потоки динамической вставки рекламы и взаимодействие с бэкэндом DAI. Менеджер потоков также обрабатывает запросы отслеживания и пересылает события потока и рекламы издателю.
Подробные инструкции по настройке тестовой среды см. в этом руководстве по запуску приложения HbbTV .
Загрузите SDK IMA DAI и файл DASH.js.
Для начала воспроизведения рекламного потока загрузите SDK IMA DAI и файл dash.js в ваше приложение. Перед тегом application.js добавьте dash.js и фреймворк IMA, используя теги <script> в index.html .
Далее создайте класс-обертку для видеоплеера, чтобы инициализировать и управлять плеером dash.js.