Otomatik oynatma

Otomatik oynatma özelliği, masaüstü ve mobil web cihazlarında desteklenir.

Chrome 53 ve iOS 10 sürümünden itibaren Android ve iPhone, satır içinde sessiz otomatik oynatmayı desteklemektedir.

Masaüstü için Safari 11, otomatik oynatma videolarını işleme şeklini değiştirdi. Google Chrome, Nisan 2018'de benzer bir değişiklik yapmıştır.

Web siteniz şu anda videoları otomatik olarak oynatıyorsa bu yeni politikaları işleyecek şekilde güncelleyin. Yeni Otomatik Oynatmayı Deneme kod örneğinde, bir videoyu otomatik oynatmanın nasıl deneyileceği ve otomatik oynatma başarısız olursa tıkla oynat seçeneğine nasıl geçileceği gösterilmektedir. Bu kılavuz, yeni örnekle ilgili size yol gösterir.

Tarayıcıda otomatik oynatmanın başarılı veya başarısız olduğunu algılama

Şu anda web tarayıcıları, otomatik oynatmanın desteklenip desteklenmediğini kontrol etmek için basit bir sorgu sunmamaktadır. Bir videonun otomatik oynatılıp oynatılamayacağını kontrol etmenin tek yolu videoyu oynatmayı denemektir.

Bu yaklaşım aşağıdaki kod snippet'inde gösterilmektedir:

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

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

Kod ilk olarak Promise döndüren bir HTML5 video öğesinde play() yöntemini çağırır. Örneğimizde Promise, otomatik oynatma özelliğini algılamak ve AdsRequest öğesini uygun şekilde ayarlamak için kullanılır.

Otomatik oynatma ve IMA

IMA SDK AdsRequest, otomatik oynatmayla ilgili olan ve sağlamanız gereken iki alana sahiptir: setAdWillAutoPlay ve setAdWillPlayMuted. İlki, reklam sunucusunun yalnızca otomatik olarak oynatılmasına izin verilen reklamları döndürmesini (doğru değerine ayarlanırsa), ikincisi ise reklam sunucusunun yalnızca sessiz veya sesi açılmış durumda başlatılmasına izin verilen reklamları döndürmesini sağlar. Örneğimiz, tarayıcının otomatik oynatmayı destekleyip desteklemediğini göstermek için içerik videosunu kullanır. Üç olası sonuca yol açabilecek iki kontrol yapın:

Bu kontrolleri yapmak için içerik videosunu oynatmayı deneyin ve döndürülen Promise öğesine bakın:

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();
  }
}

iPhone'da otomatik oynatma

Önceki koda ek olarak, iPhone'da otomatik oynatma özelliği için video etiketinize playsinline parametresini eklemeniz gerekir.

index.html

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

HTML'de yapılan bu değişiklik, içeriğinizin iPhone'un varsayılan tam ekran oynatıcısı yerine, iPhone'daki satır içi bir video oynatıcıda oynatılmasını sağlar.

Otomatik oynatma ve işitsel reklamlar

Reklamlarınızın otomatik olarak sessiz şekilde oynatılma olasılığı varsa bir reklam isteğinin yalnızca sesli reklamlar döndürüp döndürmeyeceğini dikkate almak önemlidir. Böyle bir ihtimal varsa aşağıdakilerden birini yapmanızı öneririz:

• Yalnızca video reklamlar (oynatıcınız videoyu destekliyorsa) istemek için aşağıdaki VAST URL parametresini ad_type=video güncelleyin. URL parametreleri hakkında daha fazla bilgi için bu Ad Manager kılavuzuna bakın.
• Reklamların sesi kapalı olarak başlama seçeneğini kaldırın.

IMA ses entegrasyonları hakkında daha fazla bilgi için IMA işitsel reklam kılavuzuna bakın.