Chrome'da otomatik oynatma politikası

Kullanıcı deneyimini iyileştirdi, reklam engelleyici yükleme teşviklerini en aza indirdi ve veri tüketimini azalttı

François Beaufort
François Beaufort
GitHub

Chrome'un otomatik oynatma politikaları Nisan 2018'de değişti sesli video oynatmayı neden ve nasıl etkilediğine bakalım. Spoiler uyarısı: Kullanıcılar bu yeniliğe bayılacak.

Liam Neeson: Sizi bulup duraklatacağım.
Sean Bean: Videoları otomatik oynatmak kolay değildir.
Imgflip ve Imgur'da "autoplay" etiketli internet meme'leri.

Yeni davranışlar

Fark etmiş olabileceğiniz gibi, web tarayıcıları daha sıkı otomatik oynatmaya geçiş yapıyor kullanıcı deneyimini iyileştirmeye yardımcı olmak, uygulama yükleme teşviklerini en aza indirmek Böylece yüksek maliyetli ve/veya kısıtlamalı kampanyalarda veri tüketimini azaltır ağlar. Bu değişiklikler, kullanıcıların oynatma üzerinde daha fazla kontrol sahibi olmasını sağlamak için yapılmıştır. geçerli kullanım alanlarıyla yayıncılara fayda sağlar.

Chrome'un otomatik oynatma politikaları basittir:

  • Sesi kapalı otomatik oynatmaya her zaman izin verilir.
  • Sesli otomatik oynatmaya aşağıdaki durumlarda izin verilir:
  • Üst kareler aşağıdaki işlemler için iframe'lere otomatik oynatma izni verebilir: sesli otomatik oynatmaya izin verir.

Medya Etkileşimi Dizini

Medya Etkileşimi Endeksi (MEI), bir kişinin yardımcı olur. Chrome'un yaklaşımı, kaynak başına önemli medya oynatma etkinliklerine yapılan ziyaretlerin oranıdır:

  • Medya (ses/video) tüketimi yedi saniyeden uzun olmalıdır.
  • Ses mevcut ve sesi açık olmalıdır.
  • Videonun yer aldığı sekme etkindir.
  • Videonun boyutu (piksel cinsinden) 200x140'tan büyük olmalıdır.

Chrome bundan yola çıkarak bir medya etkileşim puanı hesaplar. Bu puan, sitelerde en yüksek olandır Düzenli olarak medya içeriği oynatılıyor. Medya yeterince yüksek olduğunda yalnızca masaüstünde otomatik oynatmasına izin verilir.

Kullanıcının MEI'si, about://media-engagement dahili sayfasında bulunur.

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

Geliştirici olarak, web sitenizi farklı düzeylerde kullanıcı etkileşimi açısından test etmek için Chrome otomatik oynatma politikası davranışını yerel olarak değiştirmek isteyebilirsiniz.

  • Otomatik oynatma politikasını tamamen devre dışı bırakmak için komut satırı işaretçisi kullanabilirsiniz: chrome.exe --autoplay-policy=no-user-gesture-required. Bu, kullanıcının ürünle güçlü bir etkileşiminin olduğu bir web sitenizi test etmenize olanak tanır. otomatik oynatmaya her zaman izin verilir.

  • Ayrıca, MEI'yi devre dışı bırakarak ve genel MEI'si en yüksek olan sitelerin yeni kullanıcılar için varsayılan olarak otomatik oynatmayı etkinleştirip etkinleştirmeyeceğini belirleyerek otomatik oynatmaya hiçbir zaman izin verilmemesini sağlayabilirsiniz. Bunu işaretlerle yapın: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Iframe yetkilendirme

İ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ı ile bu izni kaynak dışı iFrame'lere aktarabilir. Otomatik oynatmaya şu videolarda varsayılan olarak izin verildiğini unutmayın: aynı kaynaktan gelen iframe'ler.

<!-- 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 izinleri politikası devre dışı olduğunda, kullanıcı hareketi olmadan play() çağrıları, söz vermeyi NotAllowedError DOMException ile reddeder. Otomatik oynatma özelliği de göz ardı edilir.

Örnekler

1. Örnek: Bir kullanıcı VideoSubscriptionSite.com web sitesini her ziyaret ettiğinde 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ğine sahiptir. Kullanıcıların çoğu siteye metin içeriği için gider ve videoları yalnızca ara sıra izler. Kullanıcıların düşük bir medya etkileşim puanına sahip olduğundan, bir kullanıcı Kullanıcı doğrudan bir sosyal medya sayfasından veya aramadan geldiğinde

3. Örnek: LocalNewsSite.com hem metin hem de video içeriğine sahiptir. Çoğu kullanıcı siteye ana sayfadan giriyor ve ardından haber makalelerini tıklıyor. Haber makalesi sayfalarında otomatik oynatmaya kullanıcı nedeniyle izin verilecek alanla etkileşimde bulunur. Ancak kullanıcıların otomatik oynatılan içerikle şaşırmaması için dikkatli olunmalıdır.

4. Örnek: MyMovieReviewBlog.com, şuraya film fragmanı içeren bir iframe yerleştirir: yorum yazın. Kullanıcılar bloga erişmek için alanla etkileşimde bulunmuştur. otomatik oynatmaya izin verilir. Ancak içeriğin otomatik olarak oynatılması için blogun bu ayrıcalığı iFrame'e açıkça devretmesi gerekir.

Chrome Enterprise politikaları

Otomatik oynatma davranışını, kiosk veya gözetimsiz sistemler gibi kullanım alanları için Chrome Enterprise politikalarıyla değiştirmek mümkündür. Otomatik oynatma ile ilgili kurumsal politikaları nasıl ayarlayacağınızı öğrenmek için Politika Listesi yardım sayfasına göz atın:

  • AutoplayAllowed politikası, otomatik oynatmaya izin verilip verilmediğini gösterir.
  • AutoplayAllowlist politikası şunları yapmanıza olanak tanır: otomatik oynatmanın her zaman etkin olacağı URL kalıpları için bir izin verilenler listesi belirtin.

Web geliştiricileri için en iyi uygulamalar

Ses/video öğeleri

Unutmamanız gereken bir nokta var: Bir videonun oynatılacağını hiçbir zaman video aslında oynatılmıyorken duraklatma düğmesi gösterme. Bu konu o kadar önemli ki, bu makaleyi gözden geçirenler için aşağıda bir kez daha yazacağım.

E-postanızın doğru olup olmadığını kontrol etmek için her zaman play işlevi tarafından döndürülen Promise'e bu içerik reddedildi:

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ıların ilgisini çekmenin iyi bir yolu, sessiz otomatik oynatma özelliğini kullanarak simgesine dokunun. (Aşağıdaki örneğe bakın.) Facebook, Instagram, Twitter ve YouTube gibi bazı web siteleri bu yöntemi zaten etkili bir şekilde kullanıyor.

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

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

Kullanıcı etkinleştirmesini tetikleyen etkinlikler, tarayıcılar arasında tutarlı bir şekilde tanımlanmaya devam etmektedir. Şimdilik, "click" uygulamasında kalmanızı öneririz. GitHub whatwg/html#3849 sorununa bakın.

Web Sesi

Web Audio API, Chrome 71'den beri otomatik oynatma kapsamındadır. Bununla ilgili bilinmesi gereken birkaç şey var. Öncelikle, ses oynatmaya başlamadan önce kullanıcı etkileşimi beklemek iyi bir uygulamadır. Böylece kullanıcılar bir şeyin gerçekleştiğini anlar. Bir “oyun” düşünün "açık/kapalı" anahtarı ile yapabilirsiniz. Uygulamanın akışına bağlı olarak "sesi aç" düğmesi de ekleyebilirsiniz.

AudioContext öğenizi sayfa yüklenirken oluşturursanız kullanıcı sayfayla etkileşime geçtikten (ör. bir düğmeyi tıkladıktan) sonra resume() öğesini çağırmanız gerekir. Alternatif olarak, bağlı herhangi bir düğümde start() çağrılırsa kullanıcı hareketinden sonra AudioContext 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');
  });
});

Ayrıca AudioContext öğesini yalnızca kullanıcı sayfasını ziyaret edin.

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

Tarayıcının ses çalmak için kullanıcı etkileşimi gerektirip gerektirmediğini tespit etmek üzere, oluşturduktan sonra AudioContext.state öğesini kontrol edin. Oynamaya izin veriliyorsa hemen running hesabına geç. Aksi takdirde suspended olacaktır. statechange etkinliğini dinlerseniz değişiklikleri eşzamansız olarak algılayabilirsiniz.

Bir örnek görmek için şu sorunu gideren küçük Çekme İsteği'ne göz atın: https://airhorner.com için bu otomatik oynatma politikası kurallarında web sesi çalma özelliği.