IMA DAI SDK mendukung integrasi ke aplikasi pemutar video HbbTV minimal. IMA DAI SDK memungkinkan permintaan Google Ad Manager untuk streaming iklan broadband menyertai streaming konten siaran. Panduan ini membahas memuat 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 yang lebih lama, panduan ini dan aplikasi contoh GitHub menggunakan JavaScript ES5.
Untuk informasi tentang cara mengintegrasikan 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 Advanced. 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 Application Information Table (AIT) kustom. Anda juga memerlukan cara untuk mentransmisikan streaming siaran untuk diterima oleh TV. Anda dapat menggunakan modulator DVB untuk mentransmisikan streaming siaran, atau metode lainnya.
- Server Web: Hosting aplikasi HbbTV di server web yang dapat diakses oleh TV.
- Acara live stream dengan jenis Manifes penayangan pod. 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 dalam 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 streaming, Anda harus memperbarui URL tabel informasi aplikasi
untuk penyiapan streaming 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 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 penyiapan 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 pelacakan ping 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.