Halaman ini diterjemahkan oleh Cloud Translation API.

Aturan iklan

IMA HTML5 SDK mendukung playlist iklan yang sepenuhnya otomatis. Fitur ini menyisipkan jeda iklan ke dalam konten seperti yang ditentukan dalam Google Ad Manager saat memproses iklan Anda. Tindakan 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 akan diteruskan melalui panggilan getAdsManager. Objek ini harus memiliki properti currentTime yang menampilkan posisi titik pemutaran 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 otomatis disisipkan pada waktu yang ditentukan dalam 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 Anda selesai. Hal ini sedikit rumit, karena dalam beberapa kasus SDK menggunakan pemutar video Anda untuk memutar iklan, jadi Anda perlu memastikan bahwa Anda hanya memberi tahu SDK saat konten Anda selesai, dan bukan saat iklan selesai. Anda dapat melakukannya menggunakan kode di bawah ini:

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 fitur tarik untuk mencari, dan properti waktu saat ini dari pemutar video diperbarui saat pengguna menarik, SDK tidak dapat membedakan antara konten yang berlangsung secara normal dan pengguna yang melakukan pencarian konten. Anda harus menggunakan objek contentPlayback kustom sebagai parameter untuk getAdsManager. Untuk contoh kasus penggunaan ini, lihat Masalah terkait Pencarian.

Catatan: Setelah konten selesai diputar atau pengguna telah menghentikan pemutaran, pastikan untuk memanggil AdsLoader.contentComplete untuk memberi tahu SDK bahwa konten telah selesai. SDK kemudian memutar jeda iklan post-roll, jika ada yang telah dijadwalkan. Peristiwa ALL_ADS_COMPLETED muncul 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 beberapa situasi, Anda mungkin ingin mencegah SDK memutar jeda iklan sampai Anda siap melakukannya. Dalam skenario ini, Anda dapat menonaktifkan pemutaran otomatis jeda iklan untuk memberi tahu SDK kapan jeda iklan siap diputar. Dengan konfigurasi ini, setelah memuat jeda iklan, SDK akan mengaktifkan peristiwa AD_BREAK_READY. Saat pemutar siap 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

Anda dapat melihat implementasi yang berfungsi di bawah.

Masalah dalam mencari

Jika menggunakan aturan iklan, Anda mungkin mengalami masalah dengan pencarian klik dan tarik. Secara khusus, setelah pengguna mengklik dan menarik untuk mencari melalui video melewati beberapa pod mid-roll, mereka mungkin melihat 2 atau lebih pod tersebut diputar secara berturut-turut sebelum konten dilanjutkan. Hal ini disebabkan oleh waktu titik pemutaran video yang diperbarui saat pengguna melakukan pencarian; jika SDK kebetulan melakukan polling untuk waktu saat ini ketika pengguna mencari melewati iklan, SDK mungkin berpikir bahwa iklan tersebut harus diputar. Saat konten dilanjutkan, konten akan memutar iklan tersebut, lalu iklan terbaru sejak pencarian. Untuk representasi visual masalah ini, lihat diagram di bawah ini:

Cara sederhana untuk mengatasi hal ini adalah menghemat waktu saat ini ketika pengguna mulai mencari, dan melaporkan waktu tersebut saat SDK memintanya hingga pengguna melanjutkan pemutaran normal. Untuk representasi visual solusi ini, lihat diagram di bawah:

Dengan solusi ini, Anda dapat melewati mid-roll 0:10 dengan benar dan hanya memutar mid-roll 0:20. Hal ini dilakukan dengan menggunakan pelacak titik pemutaran khusus, seperti yang ditunjukkan di bawah ini. Kode di bawah 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 dapat berfungsi di setiap platform kecuali Safari seluler. Di Safari seluler, properti pencarian tag video tidak diterapkan dengan benar (selalu menampilkan false). Untuk menyiasati itu, Anda perlu melakukan pemeriksaan sendiri untuk mengetahui apakah pengguna mencari sepanjang video. Berikut adalah kode contoh untuk metode ini. Sekali lagi, baris yang dicetak tebal di bawah ini merupakan 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 sekarang menggunakan properti currentTime objek Ads Anda untuk menentukan kapan harus memutar jeda iklan, bukan properti currentTime pemutar video konten.