Menyiapkan IMA SDK untuk DAI

IMA SDK mempermudah integrasi iklan multimedia ke dalam situs dan aplikasi Anda. IMA SDK dapat meminta iklan dari server iklan yang kompatibel dengan VAST dan mengelola pemutaran iklan di aplikasi Anda. Dengan IMA DAI SDK, aplikasi membuat permintaan streaming untuk video iklan dan konten—baik konten VOD maupun live. Kemudian, SDK akan menampilkan streaming video gabungan, sehingga Anda tidak perlu mengelola peralihan antara video iklan dan konten dalam aplikasi Anda.

Pilih solusi DAI yang Anda minati

Layanan lengkap Penayangan pod Cloud stitching API Live Cloud stitching API VOD

Memutar streaming VOD yang terdaftar dengan Google Cloud Video Stitcher API

Panduan ini menunjukkan cara menggunakan IMA DAI SDK untuk HTML5 guna meminta dan memutar sesi streaming VOD Google Cloud.

Panduan ini memperluas contoh dasar dari panduan Memulai untuk IMA DAI.

Untuk mengetahui informasi tentang cara berintegrasi dengan platform lain atau cara menggunakan SDK sisi klien IMA, lihat SDK Interactive Media Ads.

Untuk melihat atau mengikuti contoh integrasi yang telah selesai, download contoh penyambungan video Cloud untuk HLS atau DASH.

Catatan: IMA DAI SDK untuk HTML5 mendukung streaming HLS dan DASH, tetapi pemutaran setiap streaming memerlukan pemutar media atau ekstensi yang berbeda seperti HLS.js atau DASH.js, dengan berbagai penerapan.

Panduan ini menjelaskan cara mengonfigurasi HLS.js dan IMA DAI SDK untuk memutar streaming HLS, dengan catatan penting tentang perbedaan penerapan untuk DASH.

Lihat aplikasi contoh IMA DASH.js sebagai titik awal untuk menerapkan streaming DAI DASH dengan IMA.

Menyiapkan project Google Cloud

Siapkan project Google Cloud dan konfigurasi 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 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 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 untuk penyambungan cloud.

Mengonfigurasi lingkungan pengembangan

Poin Penting: Class IMA DAI VideoStitcherVodStreamRequest mendukung streaming HLS dan streaming DASH multi-periode. Jeda iklan disisipkan hanya di antara periode DASH.

Aplikasi contoh IMA hanya mendemonstrasikan permintaan streaming HLS. Anda tetap dapat menggunakan aliran DASH 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:

1. type: String yang harus disetel ke 'ID3' untuk streaming HLS dan 'urn:google:dai:2018' untuk streaming DASH.

2. data: Untuk pesan peristiwa DASH, ini adalah string data pesan.

3. timestamp: Angka yang merupakan waktu mulai pesan peristiwa untuk streaming DASH.

Kirim metadata sesegera dan sesering mungkin yang dapat diberikan oleh peristiwa pemain Anda. Jika metadata tidak ada atau tidak benar, IMA DAI SDK mungkin tidak memicu peristiwa iklan, sehingga peristiwa iklan tidak dilaporkan dengan benar.

Download contoh IMA DAI untuk HTML5 dan ekstrak file ZIP contoh hls_js/simple 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, lalu 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 lain, seperti Apache HTTP Server atau Node JS.

Buka browser web, lalu buka localhost:8000 untuk melihat pemutar video. Browser Anda harus mendukung library HLS.js.

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 contoh streaming dengan streaming VOD yang menggabungkan iklan, gunakan class VideoStitcherVodStreamRequest untuk membuat sesi iklan secara otomatis dengan Google Ad Manager. Anda dapat menggunakan UI Google Ad Manager untuk menemukan sesi DAI yang dihasilkan untuk pemantauan dan proses debug.

Dalam contoh yang ada, terdapat fungsi untuk meminta streaming VOD atau live stream. Agar dapat 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 dengan menambahkan opsi sesi untuk mengganti konfigurasi Cloud Video Stitcher API default 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 rendisi yang diurutkan dari bitrate terendah hingga tertinggi.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Pembersihan

Setelah berhasil menghosting streaming VOD menggunakan Google Cloud Video Stitcher API dan memintanya menggunakan IMA DAI SDK untuk HTML5, Anda harus membersihkan semua resource penayangan.

Ikuti panduan pembersihan VOD untuk menghapus semua 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.