Menggunakan IMA DAI SDK dengan klien HTML5

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

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 berumur pendek dengan pengguna Penggabung Video peran: 

OAUTH_TOKEN

Baca selengkapnya tentang membuat OAuth berumur pendek token. Token OAuth dapat digunakan kembali pada beberapa permintaan selama belum kedaluwarsa.

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 membuat ID konfigurasi VOD di Cloud penggabungan membuat Panduan konfigurasi VOD.

Mengonfigurasi lingkungan pengembangan

Aplikasi contoh IMA hanya menunjukkan permintaan streaming HLS. Anda tetap dapat menggunakan DASH stream saat membuat class VideoStitcherVodStreamRequest. 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:

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

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

  3. 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 DAI IMA untuk HTML5, lalu ekstrak hls_js/simple contoh file zip ke folder baru. Ini adalah contoh web yang dapat Anda hosting secara lokal untuk tujuan pengujian.

Untuk menghosting contoh secara lokal, buka folder baru, lalu jalankan perintah perintah {i>python<i} 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 dan buka localhost:8000 untuk melihat pemutar video. Browser Anda harus mendukung HLS.js library.

Jika semuanya berfungsi dengan baik, klik tombol putar pada video pemutar memulai film pendek "Tears of Steel", dengan jeda iklan setiap 30 detik.

Meminta streaming VOD

Untuk mengganti streaming sampel dengan streaming VOD iklan yang digabungkan, gunakan 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 dapat berfungsi dengan Google Cloud Video Stitcher API, Anda perlu tambahkan fungsi baru untuk menampilkan 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 tidak dikenal, 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);

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.

Sebelumnya
Chromecast
Berikutnya
iOS