IMA DAI SDK mendukung integrasi ke dalam aplikasi pemutar video HbbTV minimal. IMA DAI SDK memungkinkan permintaan Google Ad Manager untuk aliran iklan broadband yang menyertai aliran konten siaran. Panduan ini membahas cara memuat manifes iklan berdasarkan data peristiwa iklan dari aliran siaran.
Untuk melihat atau mengikuti integrasi contoh yang telah selesai, download Aplikasi Contoh Linear HbbTV dengan IMA HTML5 DAI SDK. Untuk mendukung perangkat TV lama, panduan ini dan aplikasi contoh GitHub menggunakan JavaScript ES5.
Untuk mengetahui informasi tentang cara berintegrasi dengan platform non-HbbTV lainnya, lihat IMA SDK.
Prasyarat
Sebelum melanjutkan panduan ini, pastikan Anda memiliki hal berikut:
- Untuk menggunakan IMA DAI, Anda harus memiliki akun Ad Manager 360 Lanjutan. Jika Anda memiliki akun Ad Manager, hubungi Account Manager Anda untuk mengetahui detail selengkapnya. Untuk mengetahui informasi tentang cara mendaftar ke Ad Manager, buka Pusat Bantuan Ad Manager.
- Aplikasi HbbTV yang berinteraksi dengan objek siaran untuk pemutaran media. Untuk mengetahui detail selengkapnya, lihat Objek AV Siaran HbbTV.
- Versi dash.js yang mendukung pramuat. Sebaiknya gunakan versi 4.6.0 atau yang lebih baru.
- Server web untuk menghosting aplikasi.
- Lingkungan pengujian dengan aliran siaran DVB. Untuk mengetahui petunjuk mendetail
tentang cara menyiapkan lingkungan pengujian, lihat
Menjalankan aplikasi HbbTV.
- Aliran Siaran: Siapkan aliran siaran yang berisi data Tabel Informasi Aplikasi (AIT) kustom. Anda juga memerlukan cara untuk mengirimkan aliran siaran agar dapat diterima oleh TV. Anda dapat menggunakan modulator DVB untuk mengirimkan aliran siaran, atau metode lainnya.
- Server Web: Hosting aplikasi HbbTV di server web yang dapat diakses oleh TV.
- Acara livestream dengan jenis Manifes penayangan pod. Untuk membuat acara, lihat Menyiapkan livestream untuk DAI.
Membuat aliran siaran yang kompatibel
Aplikasi HbbTV Anda menggunakan broadcastContainer.addStreamEventListener() untuk memproses peristiwa aliran HbbTV di aliran siaran Anda. Agar dapat memuat dan memutar iklan dengan benar, Anda harus menyiapkan aliran siaran dengan jenis peristiwa berikut untuk menyertakan payload string JSON terkait:
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"}
Untuk peristiwa ini, sertakan payload string JSON dengan streamEvent.type. Untuk mendukung pramuat iklan, peristiwa AD_BREAK_EVENT_ANNOUNCE harus menyertakan streamEvent.duration dan streamEvent.offset. Untuk mengetahui informasi selengkapnya, lihat
Memproses peristiwa aliran HbbTV.
Untuk menyiapkan aliran siaran, lihat contoh
aliran transportasi MPEG yang dimultipleks.
Untuk menggunakan aliran contoh, Anda harus memperbarui URL tabel informasi aplikasi untuk penyiapan aliran Anda sendiri.
Membuat acara livestream penayangan pod
Untuk menayangkan iklan ke aplikasi HbbTV, Anda memerlukan acara livestream penayangan pod. Untuk mengetahui informasi tentang cara menyiapkan acara, lihat Menyiapkan livestream untuk DAI. Untuk mengakses aliran yang Anda siapkan, aplikasi harus memiliki variabel berikut:
NETWORK_CODE: Kode jaringan Ad Manager untuk meminta iklan.CUSTOM_ASSET_KEY: Kunci aset kustom Ad Manager yang dibuat selama proses menyiapkan livestream untuk DAI.
Membuat struktur file aplikasi
Panduan ini menggunakan struktur file yang serupa dengan aplikasi contoh IMA HbbTV. Untuk mengikuti panduan ini, buat file berikut:
index.html: Indeks HTML untuk aplikasi Anda.Style.css: Gaya CSS untuk aplikasi Anda.application.js: Titik entri JS utama. Mengelola status pemutaran dan jeda iklan.video_player.js: Mengelola pemutar dash.js yang digunakan untuk pemutaran iklan.ads_manager.js: Mengelola penyiapan IMA, permintaan streaming, dan penanganan peristiwa.
ads_manager.js menyiapkan IMA DAI SDK. Komponen berikut menerapkan IMA DAI SDK:
PodStreamRequest: Objek yang menentukan permintaan streaming ke server iklan Google.StreamManager: Objek yang menangani streaming penyisipan iklan dinamis dan interaksi dengan backend DAI. Pengelola streaming juga menangani ping pelacakan dan meneruskan peristiwa streaming dan iklan ke penayang.
Untuk mengetahui petunjuk mendetail tentang cara menyiapkan lingkungan pengujian, lihat panduan ini tentang cara menjalankan aplikasi HbbTV.
Memuat IMA DAI SDK dan DASH.js
Untuk memulai pemutaran aliran iklan siaran, muat IMA DAI SDK dan dash.js ke dalam aplikasi Anda. Sebelum tag application.js, tambahkan dash.js dan framework IMA menggunakan tag skrip di index.html.
Selanjutnya, buat class wrapper pemutar video untuk memulai dan mengontrol pemutar dash.js.