IMA SDK memudahkan pengintegrasian iklan multimedia ke dalam situs dan aplikasi Anda. IMA SDK dapat minta iklan dari mana pun yang sesuai dengan VAST dan mengelola pemutaran iklan di aplikasi Anda. Dengan IMA DAI SDK, aplikasi membuat permintaan streaming untuk iklan dan video konten—baik VOD maupun konten live. SDK kemudian menampilkan streaming video gabungan, sehingga Anda tidak perlu mengelola peralihan antara iklan dan video konten dalam aplikasi.
Pilih solusi DAI yang Anda minati
Memutar streaming VOD yang terdaftar dengan Google Cloud Video Stitcher API
Panduan ini menunjukkan cara menggunakan IMA DAI SDK untuk HTML5 untuk meminta dan memutar Streaming VOD Google Cloud sesi pelatihan.
Panduan ini memperluas contoh dasar dari sesi Memulai kami untuk IMA DAI.
Untuk informasi tentang integrasi dengan platform lain atau tentang penggunaan IMA SDK sisi klien, lihat Interactive Media Ads SDK.
Menyiapkan project Google Cloud
Siapkan project Google Cloud dan konfigurasikan akun layanan untuk mengakses project.
Masukkan variabel berikut untuk digunakan di IMA SDK:- Lokasi
- Region Google Cloud
tempat konfigurasi VOD Anda dibuat:
LOCATION
- Nomor project
- Nomor project Google Cloud yang menggunakan Video Stitcher API:
PROJECT_NUMBER
- Token OAuth
Token OAuth akun layanan yang aktif singkat dengan pengguna Penggabung Video peran:
OAUTH_TOKEN
Baca selengkapnya tentang membuat token OAuth jangka pendek. Token OAuth dapat digunakan kembali di beberapa permintaan selama belum berakhir masa berlakunya.
- Kode jaringan
Kode jaringan Ad Manager untuk meminta iklan:
NETWORK_CODE
- ID konfigurasi VOD
ID konfigurasi VOD untuk streaming VOD:
VOD_CONFIG_ID
Baca selengkapnya tentang cara membuat ID konfigurasi VOD di Panduan pembuatan konfigurasi VOD dengan penyambungan cloud.
Mengonfigurasi lingkungan pengembangan
Aplikasi contoh IMA hanya menunjukkan permintaan streaming HLS. Anda tetap dapat menggunakan DASH
stream saat membuat class VideoStitcherVodStreamRequest
. Saat
menyiapkan pemutar yang kompatibel dengan DASH, Anda perlu menyiapkan pemroses untuk
peristiwa progres pemutar video yang dapat memberikan metadata video ke
StreamManager.processMetadata()
.
Fungsi ini menggunakan tiga parameter:
type
: String yang harus disetel ke'ID3'
untuk streaming HLS dan'urn:google:dai:2018'
untuk streaming DASH.data
: Untuk pesan peristiwa DASH, ini adalah string data pesan.timestamp
: Angka yang merupakan waktu mulai pesan peristiwa untuk DASH feed.
Kirim metadata sesegera dan sesering yang dapat disediakan oleh peristiwa pemain Anda. Jika metadata tidak ada atau salah, IMA DAI SDK mungkin tidak memicu peristiwa iklan, yang menyebabkan peristiwa iklan tidak dilaporkan dengan benar.
Download contoh IMA DAI untuk
HTML5 dan ekstrak
file zip contoh hls_js/simple
ke folder baru. Ini adalah contoh web
yang dapat Anda hosting secara lokal untuk tujuan pengujian.
Untuk menghosting contoh secara lokal, buka folder baru, dan jalankan perintah python berikut untuk memulai server web:
python3 -m http.server 8000
http.server
hanya tersedia di Python 3.x. Anda dapat menggunakan
server web lainnya,
seperti Apache HTTP Server atau Node JS.
Buka browser web, lalu buka localhost:8000
untuk melihat pemutar video.
Browser Anda harus mendukung HLS.js
library.
Jika semuanya berfungsi dengan baik, mengklik tombol putar di pemutar video akan memulai film pendek "Tears of Steel", dengan jeda iklan setiap 30 detik.
Meminta streaming VOD
Untuk mengganti streaming sampel dengan streaming VOD yang digabungkan dengan iklan, gunakan class
VideoStitcherVodStreamRequest
untuk membuat sesi iklan secara otomatis dengan Google Ad Manager. Anda dapat menggunakan
UI Google Ad Manager guna menemukan sesi DAI yang dihasilkan untuk pemantauan dan proses debug.
Dalam contoh yang ada, ada fungsi untuk meminta streaming VOD atau
livestream. Agar berfungsi dengan Google Cloud Video Stitcher API, Anda perlu menambahkan fungsi baru untuk menampilkan objek VideoStitcherVodStreamRequest
.
Berikut contohnya:
// StreamManager which will be used to request DAI streams.
let streamManager;
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(
videoElement,
adUiElement
);
streamManager.addEventListener(
[
google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
],
onStreamEvent, false);
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in our metadata, we pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
videoElement.addEventListener('pause', () => {
playButton.style.display = "block";
});
playButton.addEventListener('click', initiatePlayback);
}
function initiatePlayback() {
requestVodVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
streamRequest.vodConfigId = 'VOD_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamManager.requestStream(streamRequest);
}
Muat ulang halaman. Kemudian, Anda dapat meminta dan memutar streaming VOD kustom.
(Opsional) Menambahkan opsi sesi streaming
Sesuaikan permintaan streaming Anda dengan menambahkan opsi sesi untuk mengganti setelan default
konfigurasi Cloud Video Stitcher API menggunakan
VideoStitcherVodStreamRequest.videoStitcherSessionOptions
Jika Anda memberikan opsi yang tidak dikenal, Cloud Video Stitcher API akan merespons dengan error HTTP 400. Lihat
panduan pemecahan masalah
untuk mendapatkan bantuan.
Misalnya, Anda dapat mengganti opsi manifes dengan cuplikan kode berikut, yang meminta dua manifes streaming dengan tampilan yang diurutkan dari kecepatan bit terendah ke tertinggi.
...
// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"includeRenditions": [
{"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
{"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
],
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
Pembersihan
Anda berhasil menyelenggarakan streaming VOD menggunakan Google Cloud Video Stitcher API dan memintanya menggunakan IMA DAI SDK untuk HTML5, sebaiknya bersihkan semua bagian Google Cloud Platform.
Ikuti Pembersihan VOD panduan untuk menghapus sumber daya dan aset yang tidak diperlukan.
Terakhir, di jendela terminal tempat Anda memulai server web Python 3, gunakan
perintah ctrl+C
untuk mengakhiri server lokal.