Putar otomatis

Putar otomatis didukung di desktop dan perangkat web seluler.

Mulai Chrome 53 dan iOS 10, Android dan iPhone mendukung autoplay inline tanpa suara.

Safari 11 untuk Desktop telah mengubah cara menangani video putar otomatis. Google Chrome membuat perubahan serupa pada bulan April 2018.

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

Mendeteksi keberhasilan atau kegagalan pemutaran 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 mencoba memutarnya.

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 terlebih dahulu 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 terkait dengan putar otomatis yang perlu Anda pasok: setAdWillAutoPlay dan setAdWillPlayMuted. Parameter pertama memastikan bahwa server iklan hanya menampilkan iklan yang diizinkan untuk diputar otomatis (jika ditetapkan ke true), dan yang kedua memastikan bahwa server iklan hanya menampilkan iklan yang diizinkan untuk dimulai dalam keadaan tanpa suara atau audio. Contoh kami menggunakan video konten sebagai indikator apakah browser mendukung fitur putar otomatis. Lakukan dua pemeriksaan yang mengarah pada tiga kemungkinan hasil:

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

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 menambahkan parameter playsinline ke tag video.

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 pemutar video inline di iPhone, bukan pemutar layar penuh default iPhone.

Putar otomatis dan iklan audio

Penting untuk mempertimbangkan apakah permintaan iklan akan menampilkan iklan audio saja jika ada kemungkinan iklan Anda akan diputar otomatis tanpa suara. Jika ada, sebaiknya lakukan salah satu langkah berikut:

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

Lihat panduan iklan audio IMA untuk informasi selengkapnya tentang integrasi audio IMA.