Putar otomatis

Putar otomatis didukung di desktop dan perangkat web seluler.

Mulai Chrome 53 dan iOS 10, Android dan iPhone mendukung putar otomatis yang dibisukan inline.

Safari 11 untuk Desktop telah mengubah caranya menangani putar otomatis video. Kebijakan Privasi Chrome membuat perubahan yang serupa pada bulan April 2018.

Jika situs Anda saat ini memutar video secara otomatis, perbarui untuk menangani kebijakan baru ini. Fitur Percobaan Putar Otomatis kode baru contoh menunjukkan cara untuk mencoba memutar video secara otomatis dan kembali ke klik untuk putar jika putar otomatis gagal. Panduan ini akan menuntun Anda mempelajari sampel baru.

Mendeteksi keberhasilan atau kegagalan putar otomatis di browser

Saat ini, browser web tidak menawarkan kueri sederhana untuk memeriksa apakah putar otomatis didukung atau tidak. Satu-satunya cara untuk memeriksa apakah video dapat diputar otomatis adalah dengan coba putar.

Pendekatan ini ditunjukkan dalam cuplikan kode berikut:

var contentVideo = document.getElementById('myVideo');
var promise = contentVideo.play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay worked!
  }).catch(error => {
    // Autoplay failed.
  });
}

Kode ini pertama-tama memanggil play() pada elemen video HTML5 yang menampilkan Promise. Dalam contoh kami, Promise digunakan untuk mendeteksi kemampuan putar otomatis dan menyetel AdsRequest dengan tepat.

Putar Otomatis dan IMA

IMA SDK AdsRequest memiliki dua kolom yang berkaitan dengan putar otomatis yang harus Anda suplai: setAdWillAutoPlay dan setAdWillPlayMuted. Metode pertama memastikan server iklan hanya menampilkan iklan yang diizinkan diputar otomatis (jika disetel ke benar), dan yang kedua memastikan bahwa server iklan hanya menampilkan iklan yang diizinkan untuk dimulai dalam keadaan tanpa suara atau dibunyikan. Contoh kami menggunakan video konten sebagai indikator apakah browser itu atau tidak mendukung putar otomatis. Buatlah dua pemeriksaan yang mengarah ke tiga kemungkinan hasil:

Untuk melakukan pemeriksaan ini, coba putar video konten dan lihat hasil Promise:

var adsInitialized, autoplayAllowed, autoplayRequiresMuted;

// Called on page load.
function init() {
  videoContent = document.getElementById('contentElement');
  playButton = document.getElementById('playButton');
  // Hide the play button unless we need click-to-play.
  playButton.style.display = 'none';
  // Add an event listener now in case we need to fall back to click-to-play.
  playButton.addEventListener('click', () => {
    adDisplayContainer.initialize();
    adsInitialized = true;
    videoContent.load();
    playAds();
  });
  // Create your AdsLoader and AdDisplayContainer here.
  setUpIMA();
  // Check if autoplay is supported.
  checkAutoplaySupport();
}

function checkAutoplaySupport() {
  var playPromise = videoContent.play();
  if (playPromise !== undefined) {
    playPromise.then(onAutoplayWithSoundSuccess).catch(onAutoplayWithSoundFail);
  }
}

function onAutoplayWithSoundSuccess() {
  // If we make it here, unmuted autoplay works.
  videoContent.pause();
  autoplayAllowed = true;
  autoplayRequiresMuted = false;
  autoplayChecksResolved();
}

function onAutoplayWithSoundFail() {
  // Unmuted autoplay failed. Now try muted autoplay.
  checkMutedAutoplaySupport();
}

function checkMutedAutoplaySupport() {
  videoContent.volume = 0;
  videoContent.muted = true;
  var playPromise = videoContent.play();
  if (playPromise !== undefined) {
    playPromise.then(onMutedAutoplaySuccess).catch(onMutedAutoplayFail);
  }
}

function onMutedAutoplaySuccess() {
  // If we make it here, muted autoplay works but unmuted autoplay does not.
  videoContent.pause();
  autoplayAllowed = true;
  autoplayRequiresMuted = true;
  autoplayChecksResolved();
}

function onMutedAutoplayFail() {
  // Both muted and unmuted autoplay failed. Fall back to click to play.
  videoContent.volume = 1;
  videoContent.muted = false;
  autoplayAllowed = false;
  autoplayRequiresMuted = false;
  autoplayChecksResolved();
}

function autoplayChecksResolved() {
  // Request video ads.
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = <YOUR_AD_TAG_URL>;

  ...

  adsRequest.setAdWillAutoPlay(autoplayAllowed);
  adsRequest.setAdWillPlayMuted(autoplayRequiresMuted);
  adsLoader.requestAds(adsRequest);
}

function onAdsManagerLoaded() {
  ...
  if (autoplayAllowed) {
    playAds();
  } else {
    playButton.style.display = 'block';
  }
}

function playAds() {
  try {
    if (!adsInitialized) {
      adDisplayContainer.initialize();
      adsInitialized = true;
    }
    adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
    adsManager.start();
  } catch (adError) {
    videoContent.play();
  }
}

Putar Otomatis di iPhone

Selain kode sebelumnya, putar otomatis di iPhone mengharuskan Anda untuk menambahkan parameter playsinline ke tag video Anda.

index.html

<body>
  ...
  <video id="contentElement" playsinline muted>
    <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4">
  </video>
</body>

Perubahan pada HTML ini memastikan bahwa konten Anda diputar dalam video inline di iPhone, bukan pemutar layar penuh default iPhone.

Putar otomatis dan iklan audio

Penting untuk mempertimbangkan apakah permintaan iklan akan menampilkan iklan khusus audio jika ada kemungkinan iklan Anda akan diputar otomatis tanpa suara. Jika ada kesempatan, kami menyarankan salah satu hal berikut:

• Perbarui parameter URL VAST berikut ad_type=video untuk meminta video saja iklan (jika pemutar Anda mendukung video). Untuk informasi selengkapnya tentang parameter URL melihat panduan Ad Manager ini.
• Hapus opsi iklan agar mulai dibisukan.

Lihat panduan iklan audio IMA untuk informasi lebih lanjut tentang integrasi audio IMA.