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 livestream yang terdaftar dengan Google Cloud Video Stitcher API
Panduan ini menunjukkan cara menggunakan IMA DAI SDK untuk HTML5 untuk meminta dan memutar livestream untuk acara yang terdaftar di Google Cloud Video Stitcher API, dan cara menyisipkan jeda iklan selama pemutaran.
Panduan ini memperluas contoh dasar dari sesi Memulai kami untuk IMA DAI.
Untuk informasi cara berintegrasi dengan platform lain atau menggunakan SDK sisi klien IMA, lihat Interactive Media Ads SDK.
Menyiapkan project Google Cloud
Siapkan project Google Cloud dan konfigurasikan akun layanan untuk mengakses project Anda.
Membuat konfigurasi untuk acara livestream menggunakan livestream konten Anda sendiri atau uji coba live streaming. Panduan ini mengharapkan streaming HLS.
Masukkan variabel berikut untuk digunakan di IMA SDK:- Lokasi
- Region Google Cloud
tempat konfigurasi live Anda dibuat:
LOCATION
- Nomor project
- Nomor project Google Cloud yang menggunakan Video Stitcher API:
PROJECT_NUMBER
- Token OAuth
Token OAuth berumur pendek akun layanan dengan peran pengguna Video Stitcher:
OAUTH_TOKEN
Baca selengkapnya tentang membuat kredensial berumur pendek untuk layanan akun Google. 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 live
- ID konfigurasi live yang Anda tentukan saat membuat acara live stream:
LIVE_CONFIG_ID
- Kunci aset kustom
- Kunci aset kustom Ad Manager yang dihasilkan selama proses membuat
konfigurasi untuk acara livestream
dengan Video Stitcher API:
CUSTOM_ASSET_KEY
Mengonfigurasi lingkungan pengembangan
Aplikasi contoh IMA hanya mendemonstrasikan permintaan streaming HLS. Anda tetap dapat menggunakan DASH
stream saat membuat class VideoStitcherLiveStreamRequest
. Kapan
menyiapkan pemutar yang kompatibel dengan DASH, Anda perlu menyiapkan pemroses untuk
peristiwa kemajuan pemutar video yang dapat memberikan {i>metadata<i} video kepada
StreamManager.processMetadata()
Fungsi ini mengambil 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 mungkin sesuai dengan peristiwa pemain Anda. Jika metadata tidak ada atau salah, IMA DAI SDK mungkin tidak memicu peristiwa iklan, sehingga peristiwa iklan dilaporkan dengan tidak benar.
Download contoh DAI IMA untuk HTML5, lalu ekstrak Contoh sederhana HLS.js ke folder baru. Contoh ini adalah aplikasi 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, klik tombol putar pada video pemain memulai film pendek "Tears of Steel" setelah iklan singkat. Konten ini yang ditayangkan menggunakan streaming video on-demand (VOD).
Meminta livestream
Untuk mengganti contoh streaming VOD dengan livestream Anda, gunakan
VideoStitcherLiveStreamRequest
yang otomatis membuat sesi iklan dengan Google Ad Manager. Anda dapat
menggunakan UI Google Ad Manager guna menemukan sesi DAI yang dibuat 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 VideoStitcherLiveStreamRequest
.
Berikut contohnya:
// StreamManager which will be used to request ad-enabled 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() {
requestVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';
streamManager.requestStream(streamRequest);
}
Untuk pengujian lokal, jika file livestream berada di Cloud Storage
maka Anda harus mengaktifkan
CORS untuk origin
http://localhost:8000
.
Muat ulang halaman. Kemudian, Anda dapat meminta dan memutar live stream kustom.
(Opsional) Menambahkan opsi sesi streaming
Sesuaikan permintaan streaming Anda dengan menambahkan opsi sesi untuk mengganti konfigurasi Cloud Video Stitcher API default menggunakan VideoStitcherLiveStreamRequest.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 rendisi 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);
Menyisipkan jeda iklan
Google Cloud Video Stitcher API menyisipkan iklan yang diambil dari tag iklan untuk setiap jeda iklan. Jeda iklan ditunjukkan dalam manifes menggunakan penanda iklan. Penanda iklan disisipkan oleh encoder live stream.
Jika menggunakan live stream Anda sendiri, Anda harus menyisipkan penanda iklan. Untuk mengetahui informasi selengkapnya tentang penanda iklan HLS dan DASH yang didukung, lihat dokumentasi penanda iklan.
Jika Anda membuat live stream menggunakan Google Cloud Livestream API, menyisipkan peristiwa saluran jeda iklan.
Iklan akan diputar segera setelah jeda iklan disisipkan.
Pembersihan
Sekarang Anda berhasil menyelenggarakan live stream menggunakan Google Cloud Video Stitcher API dan memintanya menggunakan IMA DAI SDK untuk HTML5, sebaiknya bersihkan semua bagian Google Cloud Platform.
Ikuti panduan pembersihan live stream untuk menghapus resource dan aset yang tidak diperlukan.
Terakhir, di jendela terminal tempat Anda memulai server web Python 3, gunakan perintah ctrl+C
untuk mengakhiri server lokal.