Halaman ini diterjemahkan oleh Cloud Translation API.

Mengotomatiskan playlist iklan

IMA HTML5 SDK mendukung playlist iklan yang sepenuhnya otomatis. Fitur ini menyisipkan jeda iklan ke dalam konten seperti yang ditentukan di Google Ad Manager saat mentransmisikan iklan Anda. Hal ini juga sangat menyederhanakan kode pemutar video yang diperlukan untuk mendukung jeda iklan, termasuk pre-roll, mid-roll, dan post-roll.

Saat membuat AdsManager, objek contentPlayback diteruskan menggunakan panggilan getAdsManager. Objek ini harus memiliki properti currentTime yang menampilkan posisi pemutar video saat ini. Jika menggunakan elemen video HTML5 untuk menampilkan konten, Anda cukup meneruskan elemen tersebut ke SDK. Objek ini digunakan untuk melacak progres pemutaran konten sehingga jeda iklan akan otomatis disisipkan pada waktu yang ditentukan di Ad Manager. Anda juga perlu memberi tahu SDK bahwa Anda ingin SDK menangani status konten atas nama Anda.
```
var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for contentPlayback.
```

Untuk memastikan post-roll diputar, Anda harus memberi tahu SDK saat konten selesai. Hal ini sedikit rumit, karena dalam beberapa kasus, SDK menggunakan pemutar video Anda untuk memutar iklan, jadi Anda harus memastikan bahwa Anda hanya memberi tahu SDK saat konten selesai, dan bukan saat iklan selesai. Anda dapat melakukannya menggunakan kode berikut:

var videoContent = document.getElementById('contentElement');
var contentEndedListener = function() {adsLoader.contentComplete();};

videoContent.addEventListener('ended', contentEndedListener);

function onContentPauseRequested() {
  contentElement.removeEventListener('ended', contentEndedListener);
  ...
}

function onContentResumeRequested() {
  contentElement.addEventListener('ended', contentEndedListener);
  ...
}

Peristiwa CONTENT_PAUSE_REQUESTED dan CONTENT_RESUME_REQUESTED digunakan untuk menjeda dan melanjutkan konten saat jeda iklan diputar.
Jika pemutar video Anda mendukung tarik untuk mencari, dan properti waktu saat ini pemutar video diperbarui saat pengguna menarik, SDK tidak dapat membedakan antara konten yang berjalan secara normal dan pengguna yang mencari konten. Anda harus menggunakan objek contentPlayback kustom sebagai parameter ke getAdsManager. Untuk contoh kasus penggunaan ini, lihat Masalah Pencarian.

Catatan: Saat konten selesai diputar atau pengguna telah menghentikan pemutaran, pastikan untuk memanggil AdsLoader.contentComplete guna memberi sinyal ke SDK bahwa konten sudah selesai. SDK kemudian memutar jeda iklan post-roll, jika telah dijadwalkan. Peristiwa ALL_ADS_COMPLETED dipicu saat SEMUA jeda iklan telah diputar. Selain itu, perhatikan bahwa pelacakan konten dimulai saat init() dipanggil dan Anda harus selalu memanggil init() sebelum memutar konten.

Menonaktifkan pemutaran otomatis jeda iklan

Dalam situasi tertentu, Anda mungkin ingin mencegah SDK memutar jeda iklan hingga Anda siap. Dalam skenario ini, Anda dapat menonaktifkan pemutaran otomatis jeda iklan untuk memberi tahu SDK saat Anda siap untuk memutar jeda iklan. Dengan konfigurasi ini, setelah SDK memuat jeda iklan, SDK akan memicu peristiwa AD_BREAK_READY. Saat pemutar siap untuk memulai jeda iklan, Anda dapat memanggil adsManager.start():

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

Cobalah

Lihat kode berikut untuk mengetahui implementasi yang berfungsi.

Masalah terkait pencarian

Jika menggunakan aturan iklan, Anda mungkin mengalami masalah dengan penelusuran klik-dan-tarik. Secara khusus, setelah pengguna mengklik dan menarik untuk mencari video melewati beberapa pod midroll, mereka mungkin melihat 2 atau lebih pod tersebut diputar secara berurutan sebelum konten dilanjutkan. Hal ini disebabkan oleh pembaruan waktu playhead video saat pengguna mencari; jika SDK kebetulan melakukan polling untuk waktu saat ini saat pengguna mencari melewati iklan, SDK mungkin menganggap iklan tersebut harus diputar. Saat konten dilanjutkan, konten akan memutar iklan tersebut, lalu iklan terbaru sejak pencarian. Untuk representasi visual masalah ini, lihat diagram berikut:

Simpan waktu saat ini saat pengguna mulai mencari, dan laporkan waktu tersebut saat SDK meminta hingga pengguna melanjutkan pemutaran normal. Untuk representasi visual solusi ini, lihat diagram berikut:

Dengan solusi ini, Anda akan melewati iklan mid-roll 0:10 dengan benar dan hanya memutar iklan mid-roll 0:20. Hal ini dilakukan menggunakan pelacak playhead kustom dalam cuplikan kode berikut. Kode ini berisi modifikasi (ditampilkan dalam cetak tebal) ads.js dalam contoh HTML5 lanjutan yang tersedia di halaman download kami.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Masalah umum pada Safari seluler

Metode ini akan berfungsi di setiap platform kecuali Safari seluler. Di Safari seluler, properti penelusuran tag video tidak diterapkan dengan benar (selalu menampilkan nilai salah). Untuk mengatasinya, Anda harus melakukan pemeriksaan sendiri untuk melihat apakah pengguna mencari di video. Berikut adalah kode contoh untuk metode ini. Sekali lagi, baris yang dicetak tebal adalah modifikasi pada kode yang ada.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Dengan perubahan ini, SDK kini menggunakan properti currentTime dari objek Ads Anda untuk menentukan kapan harus memutar jeda iklan, bukan properti currentTime dari pemutar video konten.