IMA DAI SDK поддерживает интеграцию с минимальным приложением видеоплеера HbbTV. IMA DAI SDK позволяет Google Ad Manager запрашивать широкополосный рекламный поток, сопровождающий поток широковещательного контента. В этом руководстве описывается загрузка манифеста объявления на основе данных о рекламных событиях из широковещательного потока.
Чтобы просмотреть или проследить за завершенным примером интеграции, загрузите образец приложения HbbTV Linear Sample с IMA HTML5 DAI SDK . Для поддержки старых телевизионных устройств это руководство и пример приложения GitHub написаны на JavaScript ES5.
Информацию об интеграции с другими платформами, отличными от HbbTV, см. в разделе SDK интерактивной медиарекламы .
Предварительные условия
Прежде чем продолжить работу с этим руководством, убедитесь, что у вас есть следующее:
- Чтобы использовать IMA DAI, у вас должен быть аккаунт Менеджера рекламы 360 Advanced . Если у вас есть учетная запись Менеджера рекламы, обратитесь к менеджеру своего аккаунта за более подробной информацией. Информацию о регистрации в Менеджере рекламы можно найти в Справочном центре Менеджера рекламы .
- Приложение HbbTV, взаимодействующее с объектом вещания для воспроизведения мультимедиа. Дополнительные сведения см. в разделе AV-объект HbbTV Broadcast .
- Версия 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: код сети Менеджера рекламы для запроса объявлений. -
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, используя теги скрипта в index.html .
<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script> <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
Затем создайте класс-оболочку видеоплеера для запуска и управления проигрывателем Dash.js.