IMA DAI SDK mendukung integrasi ke dalam aplikasi pemutar video HbbTV minimal. IMA DAI SDK memungkinkan permintaan Google Ad Manager untuk streaming iklan broadband menyertai streaming konten siaran. Panduan ini membahas pemuatan manifes iklan berdasarkan data peristiwa iklan dari aliran siaran.
Untuk melihat atau mengikuti contoh integrasi 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 melakukan integrasi dengan platform non-HbbTV lainnya, lihat SDK Iklan Media Interaktif.
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 berinteraksi dengan objek siaran untuk pemutaran media. Untuk mengetahui detail selengkapnya, lihat Objek AV Siaran HbbTV.
- Versi dash.js yang mendukung pra-pemuatan. 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.
- Broadcast Stream: Siapkan aliran siaran yang berisi data Tabel Informasi Aplikasi (AIT) kustom. Anda juga memerlukan cara untuk mentransmisikan streaming siaran agar dapat diterima oleh TV. Anda dapat menggunakan modulator DVB untuk mentransmisikan aliran siaran, atau metode lainnya.
- Server Web: Hosting aplikasi HbbTV di server web yang dapat diakses oleh TV.
- Acara live stream dengan jenis Pod serving manifest. Untuk membuat acara, lihat Menyiapkan live stream untuk DAI.
Membuat streaming siaran yang kompatibel
Aplikasi HbbTV Anda menggunakan broadcastContainer.addStreamEventListener() untuk memproses
peristiwa streaming HbbTV di streaming siaran Anda. Untuk memuat dan memutar iklan dengan benar,
Anda harus menyiapkan streaming 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 pra-pemuatan iklan, peristiwa AD_BREAK_EVENT_ANNOUNCE harus menyertakan
streamEvent.duration dan streamEvent.offset. Untuk mengetahui informasi selengkapnya, lihat
Memproses peristiwa streaming HbbTV.
Untuk menyiapkan streaming siaran, lihat contoh
multiplexed MPEG transport stream.
Untuk menggunakan contoh aliran, Anda harus memperbarui URL tabel informasi aplikasi
untuk penyiapan aliran Anda sendiri.
Membuat acara live stream penayangan pod
Untuk menayangkan iklan ke aplikasi HbbTV, Anda memerlukan acara live stream penayangan pod. Untuk informasi tentang cara menyiapkan acara, lihat Menyiapkan live stream 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 penyiapan live stream 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 iklan dan streaming ke penayang.
Untuk mengetahui petunjuk mendetail tentang cara menyiapkan lingkungan pengujian, lihat panduan ini tentang menjalankan aplikasi HbbTV.
Memuat IMA DAI SDK dan DASH.js
Untuk memulai pemutaran streaming 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.