IMA SDK memudahkan pengintegrasian iklan multimedia ke dalam situs dan aplikasi Anda. IMA SDK dapat meminta iklan dari server iklan apa pun yang sesuai dengan VAST dan mengelola pemutaran iklan di aplikasi Anda. Dengan IMA DAI SDK, aplikasi membuat permintaan streaming untuk video iklan dan 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
DAI layanan penuh
Panduan ini menunjukkan cara mengintegrasikan IMA DAI SDK ke dalam aplikasi pemutar video sederhana. Jika Anda ingin melihat atau mengikuti contoh integrasi yang telah selesai, download contoh sederhana dari GitHub.
Ringkasan IMA DAI
Mengimplementasikan IMA DAI melibatkan dua komponen SDK utama seperti yang ditunjukkan dalam panduan ini:
StreamRequest
— dapat berupaVODStreamRequest
atauLiveStreamRequest
: Objek yang menentukan permintaan streaming. Permintaan streaming dapat ditujukan untuk video-on-demand atau live stream. Permintaan menentukan Content ID, serta kunci API atau token autentikasi dan parameter lainnya.StreamManager
: Objek yang menangani streaming penyisipan iklan dinamis dan interaksi dengan backend DAI. Pengelola streaming juga menangani ping pelacakan serta meneruskan streaming dan peristiwa iklan kepada penayang.
Prasyarat
- Tiga file kosong
- dai.html
- dai.css
- dai.js
- Python yang diinstal di komputer Anda, atau server web untuk digunakan dalam pengujian
Memulai server pengembangan
Karena IMA DAI SDK memuat dependensi menggunakan protokol yang sama dengan halaman tempat muatnya dimuat, Anda harus menggunakan server web untuk menguji aplikasi. Cara yang paling sederhana untuk memulai server pengembangan lokal adalah dengan menggunakan server bawaan Python.
Dengan menggunakan command line, jalankan dari direktori yang berisi file
index.html
Anda:python -m http.server 8000
Di browser web, buka
http://localhost:8000/
Anda juga dapat menggunakan server web lainnya, seperti Server HTTP Apache.
Membuat pemutar video sederhana
Pertama, ubah dai.html untuk membuat elemen video HTML5 sederhana dan div yang akan digunakan untuk klik-tayang. Tambahkan juga tag yang diperlukan untuk memuat file dai.css
dan dai.js, serta untuk mengimpor pemutar video hls.js
. Kemudian,
ubah dai.css untuk menentukan ukuran dan posisi elemen halaman.
Terakhir, di dai.js, tentukan variabel untuk menyimpan informasi permintaan
streaming dan fungsi initPlayer()
yang akan dijalankan saat halaman dimuat.
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
<h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="ad-ui"></div>
</body>
</html>
dai.css
#video,
#ad-ui {
width: 640px;
height: 360px;
position: absolute;
top: 35px;
left: 0;
}
#ad-ui {
cursor: pointer;
}
dai.js
var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'
// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";
// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
}
Memuat IMA DAI SDK
Selanjutnya, tambahkan framework IMA menggunakan tag skrip di dai.html, sebelum tag untuk dai.js.
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
Melakukan inisialisasi StreamManager dan membuat permintaan streaming
Untuk meminta kumpulan iklan, buat ima.dai.api.StreamManager
, yang
bertanggung jawab untuk meminta dan mengelola streaming DAI. Konstruktor mengambil
elemen video, dan instance yang dihasilkan menggunakan elemen UI iklan untuk menangani klik
iklan.
Kemudian, tentukan fungsi yang meminta aliran data. Contoh ini mencakup fungsi untuk VOD dan livestream yang membuat instance VODStreamRequest
dan LiveStreamRequest
, lalu memanggil streamManager.requestStream()
dengan parameter streamRequest
. Untuk livestream, Anda juga perlu menambahkan pengendali untuk memproses peristiwa metadata terjadwal dan meneruskan peristiwa tersebut ke StreamManager
. Anda dapat menambahkan komentar atau menghapus tanda komentar pada kode tersebut agar sesuai dengan kasus penggunaan Anda.
Kedua metode ini mengambil kunci API opsional. Jika menggunakan aliran yang dilindungi, Anda
harus
membuat kunci autentikasi DAI.
Tidak ada stream dalam contoh ini yang dilindungi, sehingga apiKey
tidak digunakan.
dai.js
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)
// Timed metadata is only used for LIVE streams.
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in the metadata, 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);
});
}
});
requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
// Uncomment the line below and comment out the one above to request a
// LIVE stream instead of a VOD stream.
//requestLiveStream(TEST_ASSET_KEY, null);
}
function requestVODStream(cmsId, videoId, apiKey) {
var streamRequest = new google.ima.dai.api.VODStreamRequest();
streamRequest.contentSourceId = cmsId;
streamRequest.videoId = videoId;
streamRequest.apiKey = apiKey;
streamManager.requestStream(streamRequest);
}
function requestLiveStream(assetKey, apiKey) {
var streamRequest = new google.ima.dai.api.LiveStreamRequest();
streamRequest.assetKey = assetKey;
streamRequest.apiKey = apiKey;
streamManager.requestStream(streamRequest);
}
Menangani peristiwa streaming
Terakhir, Anda perlu menerapkan pemroses peristiwa untuk peristiwa video besar. Contoh sederhana ini menangani peristiwa LOADED
, ERROR
, AD_BREAK_STARTED
, dan AD_BREAK_ENDED
dengan memanggil fungsi onStreamEvent()
. Fungsi ini
menangani error dan pemuatan streaming, serta menonaktifkan kontrol pemutar
saat iklan diputar, yang diperlukan oleh SDK. Saat streaming
dimuat, pemutar video akan memuat dan memutar URL yang disediakan menggunakan fungsi
loadUrl()
.
Anda juga dapat menyiapkan pemroses peristiwa untuk peristiwa pause
dan start
elemen video agar pengguna dapat melanjutkan pemutaran saat IMA dijeda
selama jeda iklan.
Agar berfungsi dengan DAI, pemutar kustom Anda harus meneruskan peristiwa ID3 untuk livestream ke IMA DAI SDK seperti yang ditunjukkan pada kode contoh.
dai.js
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
videoElement.addEventListener('pause', onStreamPause);
videoElement.addEventListener('play', onStreamPlay);
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);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
isAdBreak = true;
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
console.log('Ad Break Ended');
isAdBreak = false;
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}
function loadUrl(url) {
console.log('Loading:' + url);
hls.loadSource(url);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log('Video Play');
videoElement.play();
});
}
function onStreamPause() {
console.log('paused');
if (isAdBreak) {
videoElement.controls = true;
adUiElement.style.display = 'none';
}
}
function onStreamPlay() {
console.log('played');
if (isAdBreak) {
videoElement.controls = false;
adUiElement.style.display = 'block';
}
}
Selesai. Anda sekarang meminta dan menampilkan iklan dengan IMA DAI SDK. Untuk mempelajari fitur SDK lanjutan lainnya, lihat panduan lainnya atau contoh di GitHub.