IMA DAI SDK mendukung integrasi ke dalam aplikasi pemutar video HbbTV minimal. IMA DAI SDK memungkinkan permintaan Google Ad Manager untuk streaming iklan broadband agar dapat menyertai streaming konten siaran. Panduan ini membahas memuat manifes iklan berdasarkan data peristiwa iklan dari streaming 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 informasi tentang integrasi dengan platform non-HbbTV lainnya, lihat Interactive Media Ads SDK.
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 informasi tentang pendaftaran ke Ad Manager, kunjungi Pusat Bantuan Ad Manager.
- Aplikasi HbbTV yang berinteraksi dengan objek siaran untuk pemutaran media. Untuk 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 streaming siaran DVB. Untuk petunjuk terperinci
tentang cara menyiapkan lingkungan pengujian, lihat
Menjalankan aplikasi HbbTV.
- Aliran Siaran: Menyiapkan aliran siaran yang berisi data Tabel Informasi Aplikasi (AIT) kustom. Anda juga memerlukan cara untuk mengirimkan streaming siaran agar dapat diterima oleh TV. Anda dapat menggunakan modulator DVB untuk mengirimkan streaming siaran, atau metode lainnya.
- Server Web: Menghosting aplikasi HbbTV di server web yang dapat diakses oleh TV.
- Peristiwa livestream dengan jenis Pod yang menyalurkan manifes. Untuk membuat peristiwa, 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 pramuat iklan, peristiwa AD_BREAK_EVENT_ANNOUNCE harus menyertakan
streamEvent.duration dan streamEvent.offset. Untuk informasi selengkapnya, lihat
Memproses peristiwa streaming HbbTV.
Untuk menyiapkan streaming siaran, lihat contoh
multipleks streaming transpor MPEG.
Untuk menggunakan contoh streaming, Anda harus memperbarui URL tabel informasi aplikasi untuk penyiapan streaming Anda sendiri.
Membuat pod yang menayangkan acara live stream
Untuk menayangkan iklan ke aplikasi HbbTV, Anda memerlukan peristiwa live stream penayangan pod. Untuk mengetahui informasi cara menyiapkan peristiwa, lihat Menyiapkan livestream untuk DAI. Untuk mengakses streaming 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 mirip dengan aplikasi contoh HbbTV IMA. Untuk mengikuti panduan ini, pastikan Anda membuat 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 aliran dan interaksi penyisipan iklan dinamis dengan backend DAI. Pengelola streaming juga menangani ping pelacakan dan meneruskan peristiwa streaming dan iklan ke penayang.
Untuk 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
aplikasi Anda. Sebelum tag application.js, tambahkan dash.js dan framework IMA
menggunakan tag skrip di 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>
Selanjutnya, buat class wrapper pemutar video untuk memulai dan mengontrol pemutar dash.js.