Otomatik oynatma

Otomatik oynatma, masaüstü bilgisayarlarda 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'de otomatik oynatmayı işleme biçimi değişti videolar başlıklı makaleye göz atın. Google Chrome benzer bir değişiklik yaptı kullanıma sunuldu.

Web siteniz şu anda videoları otomatik olarak oynatıyorsa birlikte ele alacağız. Yeni Otomatik Oynatma Denemesi kodu örnek , bir videonun nasıl otomatik olarak oynatılmaya çalışılacağını ve otomatik oynatma başarısız olursa tıkla oynat özelliği. Bu kılavuz, yeni örnekte 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 güvenli olup olmadığını kontrol etmek için basit bir sorgu sunmamaktadır. desteklenip desteklenmediğini belirleyin. Bir videonun otomatik oynatılıp oynatılamayacağını kontrol etmenin tek yolu: onu çalmayı deneyin.

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 bir HTML5 video öğesinde play() öğesini çağırır. Bu çağrı, Promise Örneğimizde Promise, otomatik oynatma özelliğini algılamak ve AdsRequest sağlayabilir.

Otomatik oynatma ve IMA

IMA SDK AdsRequest otomatik oynatmayla ilgili iki alana sahiptir ve şunları yapmanız gerekir: tedarik: setAdWillAutoPlay ve setAdWillPlayMuted. Birincisi, reklam sunucusunun yalnızca otomatik oynatılabilir (doğru değerine ayarlanırsa) ve üçüncüsü, reklam sunucusunun yalnızca sesi kapatılmış veya sesi açılmış durumda başlatılabilen reklamları döndürür. Örneğimiz içerik videosunu, bir tarayıcının çalışıp çalışmadığını otomatik oynatmayı destekler. Üç potansiyel sonuç sağlayacak iki kontrol yapın:

Bu kontrolleri yapmak için içerik videosunu oynatmaya çalışın ve döndürülen içeriklere bakın. 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();
  }
}

iPhone'da otomatik oynatma

Önceki koda ek olarak iPhone'da otomatik oynatma özelliğini kullanmak için playsinline parametresini video etiketinize ekleyin.

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 bir satır içi videoda oynatılmasını sağlar. oynatıcısını kullanıyor.

Otomatik oynatma ve işitsel reklamlar

Bir reklam isteğinin, şu durumlarda yalnızca işitsel reklam döndürüp döndürmeyeceğini göz önünde bulundurmak önemlidir: reklamlarınızın sesi kapalı olarak otomatik olarak oynatılma olasılığı vardır. Böyle bir ihtimal varsa aşağıdakilerden birini öneririz:

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

IMA işitsel reklamlar kılavuzunu inceleyin göz atın.