Chrome'da otomatik oynatma politikası

Kullanıcı deneyimini iyileştirdi, reklam engelleyici yüklemeye yönelik teşvikleri en aza indirdi ve veri tüketimini azalttı

Furkan
François Beaufort

Chrome'un otomatik oynatma politikaları Nisan 2018'de değişti. Bu durumun sesli video oynatmayı neden ve nasıl etkilediğini sizinle paylaşmak istiyorum. Spoiler uyarısı: Kullanıcılar buna bayılacak!

Liam Neeson: Seni bulacağım ve duraklatacağım.
Sean Bean: One sadece videoları otomatik olarak oynatmıyor.
Imgflip ve Imgur'da "autoplay" etiketli internet meme'leri bulundu.

Yeni davranışlar

Fark etmiş olduğunuz gibi web tarayıcıları, kullanıcı deneyimini iyileştirmek, reklam engelleyici yüklemeye yönelik teşvikleri en aza indirmek ve pahalı ve/veya kısıtlı ağlarda veri tüketimini azaltmak için daha katı otomatik oynatma politikalarına geçiş yapmaktadır. Bu değişikliklerin amacı, kullanıcılara oynatma üzerinde daha fazla kontrol sunmak ve meşru kullanım alanlarıyla yayıncılara fayda sağlamak.

Chrome'un otomatik oynatma politikaları basittir:

Medya Katılım İndeksi

Medya Etkileşim Endeksi (MEI), kullanıcıların bir sitede medya tüketme eğilimini ölçer. Chrome'un yaklaşımı, kaynak başına ziyaretlerin önemli medya oynatma etkinliklerine oranıdır:

  • Medya (ses/video) kullanımı yedi saniyeden uzun olmalıdır.
  • Ses mevcut ve sesi açık olmalıdır.
  • Videonun bulunduğu sekme etkin olmalıdır.
  • Videonun boyutu (piksel cinsinden) 200x140'tan büyük olmalıdır.

Chrome bundan sonra, düzenli olarak medya oynatılan sitelerde en yüksek olan medya etkileşim puanını hesaplar. Yeterince yüksek bir seviyeye ulaştığında, medyanın yalnızca masaüstünde otomatik oynatmasına izin verilir.

Bir kullanıcının MEI'sına about://media-engagement dahili sayfasından ulaşabilirsiniz.

about://media-engagement dahili sayfasının ekran görüntüsü.
Chrome'daki about://media-engagement dahili sayfasının ekran görüntüsü.

Geliştirici geçişleri

Bir geliştirici olarak, web sitenizi farklı kullanıcı etkileşimi düzeylerine karşı test etmek için Chrome otomatik oynatma politikasının davranışını yerel olarak değiştirmek isteyebilirsiniz.

  • Komut satırı işareti kullanarak otomatik oynatma politikasını tamamen devre dışı bırakabilirsiniz: chrome.exe --autoplay-policy=no-user-gesture-required. Böylece, kullanıcı sitenizle yakından ilgilenmiş gibi ve otomatik oynatmaya her zaman izin verilecek şekilde web sitenizi test edebilirsiniz.

  • Ayrıca MEI'yi devre dışı bırakarak otomatik oynatmaya hiçbir zaman izin verilmemesini ve yeni kullanıcılar için varsayılan olarak en yüksek toplam MEI'ye sahip sitelerin otomatik oynatma alıp almayacağına karar verebilirsiniz. Bunu işaretlerle yap: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

iFrame yetkisi

İzin politikası, geliştiricilerin tarayıcı özelliklerini ve API'lerini seçerek etkinleştirmesine ve devre dışı bırakmasına olanak tanır. Bir kaynak otomatik oynatma izni aldıktan sonra, otomatik oynatma için izin politikasıyla bu izni kökler arası iframe'lere aktarabilir. Otomatik oynatmaya aynı kaynaklı iframe'lerde varsayılan olarak izin verildiğini unutmayın.

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

Otomatik oynatma için izin politikası devre dışı bırakıldığında kullanıcı hareketi olmadan play() işlevine yapılan çağrılar NotAllowedError DOMException ile sözü reddeder. Ayrıca, autoplay özelliği de dikkate alınmaz.

Örnekler

1. Örnek: Bir kullanıcı dizüstü bilgisayarından VideoSubscriptionSite.com sitesini her ziyaret ettiğinde bir TV programı veya film izliyor. Medya etkileşim puanı yüksek olduğu için otomatik oynatmaya izin verilir.

2. Örnek: GlobalNewsSite.com hem metin hem de video içeriğe sahiptir. Çoğu kullanıcı siteye metin içeriği için gider ve yalnızca ara sıra video izler. Kullanıcının medya etkileşim puanı düşük olduğundan, kullanıcı doğrudan sosyal medya sayfasından veya aramadan gezinirken otomatik oynatmaya izin verilmez.

3. Örnek: LocalNewsSite.com hem metin hem de video içeriğe sahiptir. Çoğu kullanıcı siteye ana sayfadan giriyor ve daha sonra haber makalelerini tıklıyor. Alanla kullanıcı etkileşimi nedeniyle, haber makalesi sayfalarında otomatik oynatmaya izin verilir. Bununla birlikte, otomatik oynatılan içeriğin kullanıcıları şaşırtmadığından emin olmak için dikkatli olun.

Örnek 4: MyMovieReviewBlog.com, bir yorumla birlikte kullanılmak üzere film fragmanına sahip bir iframe yerleştirir. Kullanıcılar bloga ulaşmak için alanla etkileşimde bulunduğundan otomatik oynatmaya izin verilir. Ancak içeriğin otomatik olarak oynatılması için blogun bu ayrıcalığı iframe'e açık bir şekilde ataması gerekir.

Chrome kurumsal politikaları

Kiosk'lar veya gözetimsiz sistemler gibi kullanım alanları için Chrome kurumsal politikalarıyla otomatik oynatma davranışını değiştirmek mümkündür. Otomatik oynatmayla ilgili kurumsal politikaların nasıl ayarlanacağını öğrenmek için Politika Listesi yardım sayfasına göz atın:

  • AutoplayAllowed politikası, otomatik oynatmaya izin verilip verilmediğini kontrol eder.
  • AutoplayAllowlist politikası, otomatik oynatmanın her zaman etkin olacağı URL kalıpları için bir izin verilenler listesi belirtmenize olanak tanır.

Web geliştiricileri için en iyi uygulamalar

Ses/Video öğeleri

Unutmamanız gereken tek bir nokta var: Hiçbir zaman bir videonun oynatılacağını varsaymayın ve video gerçekten oynatılmadığında duraklat düğmesi göstermeyin. Gönderilere hızlıca göz gezdirenler için bu mesajı bir kez daha aşağıya yazacağım.

Reddedilmiş olup olmadığını görmek için her zaman play işlevi tarafından döndürülen Promise'e bakmanız gerekir:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

Kullanıcılarla etkileşim kurmanın iyi bir yolu, sessiz otomatik oynatma özelliğini kullanarak sesi açmayı seçmelerine izin vermektir. (Aşağıdaki örneği inceleyin.) Facebook, Instagram, Twitter ve YouTube dahil bazı web siteleri bunu zaten etkili bir şekilde yapıyor.

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

Kullanıcı etkinleştirmesini tetikleyen etkinlikler, tarayıcılar genelinde tutarlı bir şekilde tanımlanmaya devam eder. O zamana kadar "click" kullanmaya devam etmenizi öneririz. GitHub issue whatwg/html#3849 sayfasına göz atın.

Web Sesi

Web Audio API, Chrome 71'den beri otomatik oynatma kapsamındadır. Bu konuda bilmeniz gereken birkaç şey var. Öncelikle, kullanıcıların bir şeyden haberdar olması için ses çalmaya başlamadan önce kullanıcı etkileşimini beklemek iyi bir uygulamadır. Örneğin bir "oynat" düğmesi veya "açma/kapatma" anahtarını düşünün. Ayrıca, uygulamanın akışına bağlı olarak bir "sesi aç" düğmesi de ekleyebilirsiniz.

AudioContext öğenizi sayfa yükleme sırasında oluşturursanız kullanıcının sayfayla etkileşim kurmasından sonraki belirli bir zamanda (ör. kullanıcı bir düğmeyi tıkladıktan sonra) resume() çağrısı yapmanız gerekir. Alternatif olarak, ekli herhangi bir düğümde start() çağrılırsa AudioContext, bir kullanıcı hareketinin ardından devam ettirilir.

// Existing code unchanged.
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

AudioContext öğesini yalnızca kullanıcı sayfayla etkileşimde bulunduğunda da oluşturabilirsiniz.

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

Tarayıcının ses çalması için kullanıcı etkileşimi gerekip gerekmediğini belirlemek üzere, AudioContext.state oluşturduktan sonra kontrol edin. Oynamaya izin veriliyorsa hemen running öğesine geçmelidir. Aksi takdirde suspended olacaktır. statechange etkinliğini dinlerseniz değişiklikleri eşzamansız olarak tespit edebilirsiniz.

Bir örnek görmek isterseniz https://airhorner.com adresindeki bu otomatik oynatma politika kuralları için Web Sesi çalmasını düzelten küçük Çekme İsteği'ne göz atın.