Daha iyi kullanıcı deneyimi, reklam engelleyici yükleme teşvikleri azaltıldı ve veri tüketimi azaltıldı
Chrome'un otomatik oynatma politikaları Nisan 2018'de değişti. Bunun sesli video oynatmayı neden ve nasıl etkilediğini anlatmak için buradayım. Spoiler uyarısı: Kullanıcılar bu oyuna bayılacak!
Yeni davranışlar
Sizin de fark etmiş olabileceğiniz 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ş yapıyor. Bu değişikliklerin amacı, kullanıcılara oynatma üzerinde daha fazla kontrol sağlamak ve geçerli kullanım alanlarıyla yayıncılara fayda sağlamaktır.
Chrome'un otomatik oynatma politikaları basittir:
- Sessiz otomatik oynatmaya her zaman izin verilir.
- Sesli otomatik oynatmaya aşağıdaki durumlarda izin verilir:
- Kullanıcı, alanla etkileşimde bulundu (tıklama, dokunma vb.).
- Masaüstünde, kullanıcının Medya Etkileşim Endeksi eşiği aşılmıştır. Bu, kullanıcının daha önce sesli videoyu oynattığı anlamına gelir.
- Kullanıcı, mobil cihazda siteyi ana ekranına eklemiş veya masaüstüne PWA'yı yüklemiştir.
- Üst kareler, sesli otomatik oynatmaya olanak tanımak için iframe'lerine otomatik oynatma izni verebilir.
Medya Etkileşimi Dizini
Medya Etkileşim Endeksi (MEI), kişinin bir sitede medya tüketme eğilimini ölçer. Chrome'un yaklaşımı, kaynak başına ziyaret sayısının önemli medya oynatma etkinliklerine 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 sonra bir medya etkileşim puanı hesaplar. Bu puan, medyanın düzenli olarak oynatıldığı sitelerde en yüksek değerdir. Yeterince yüksek olduğunda medya, yalnızca masaüstünde otomatik oynatmaya 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ü.
Geliştirici geçişleri
Bir geliştirici olarak, web sitenizi farklı kullanıcı etkileşimi düzeylerine göre test etmek için Chrome otomatik oynatma politikasının davranışını yerel olarak değiştirmek isteyebilirsiniz.
Bir komut satırı işaretini kullanarak otomatik oynatma politikasını tamamen devre dışı bırakabilirsiniz:
chrome.exe --autoplay-policy=no-user-gesture-required. Bu, kullanıcının sitenizle güçlü bir şekilde etkileşim kurmuş gibi web sitenizi test etmenize olanak tanır. Otomatik oynatmaya her zaman izin verilir.Ayrıca MEI'yi devre dışı bırakarak ve genel olarak en yüksek MEI'ye sahip sitelerin yeni kullanıcılar için varsayılan olarak otomatik oynatma kullanıp kullanmayacağını belirleyerek otomatik oynatmaya hiçbir zaman izin verilmemesini sağlamaya karar verebilirsiniz. Bunu işaretlerle yapın:
chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.
iFrame yetkilendirmesi
İzin politikası, geliştiricilerin tarayıcı özelliklerini ve API'leri seçerek etkinleştirmelerine ve devre dışı bırakmalarına olanak tanır. Bir kaynak otomatik oynatma izni aldıktan sonra bu izni otomatik oynatma için izin politikası ile çapraz kaynak iframe'lere verebilir. Aynı kaynak iframe'lerde otomatik oynatmaya 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çin yapılan çağrılar, NotAllowedError DOMException ile verilen taahhüdü reddeder. Ayrıca otomatik oynatma özelliği de yoksayılır.
Örnekler
1. Örnek: Bir kullanıcı dizüstü bilgisayarında VideoSubscriptionSite.com sitesini her ziyaret ettiğinde bir TV programı veya film izler. Medya etkileşim puanı yüksek
olduğu için otomatik oynatmaya izin veriliyor.
2. Örnek: GlobalNewsSite.com hem metin hem de video içeriğine sahiptir.
Çoğu kullanıcı metin içeriği için siteye gider ve sadece ara sıra video izler.
Kullanıcıların medya etkileşim puanı düşük olduğundan, kullanıcı doğrudan bir sosyal medya sayfasından veya aramadan giderse otomatik oynatmaya izin verilmez.
3. Örnek: LocalNewsSite.com hem metin hem de video içeriğine sahiptir.
Çoğu kullanıcı siteye ana sayfadan girer ve daha sonra haber makalelerini tıklar. Kullanıcının alanla etkileşimi nedeniyle, haber makalesi sayfalarında otomatik oynatmaya izin verilir. Bununla birlikte, otomatik oynatılan içerik
kullanıcıları şaşırtmamalıdır.
4. Örnek: MyMovieReviewBlog.com, inceleme yapılacak film fragmanı içeren bir iframe yerleştirir. Kullanıcılar bloga gitmek 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ça yetkilendirmesi gerekir.
Chrome Enterprise politikaları
Kiosk'lar veya gözetimsiz sistemler gibi kullanım alanları için Chrome kurumsal politikaları ile 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:
AutoplayAllowedpolitikası, otomatik oynatmaya izin verilip verilmediğini kontrol eder.AutoplayAllowlistpolitikası, otomatik oynatmanın her zaman etkin olduğu 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 bir nokta var: Hiçbir zaman bir videonun oynatılacağını varsaymayın ve video aslında oynatılmıyorken duraklatma düğmesi göstermeyin. Bu gönderiye yalnızca göz gezdirenler için aşağıya bir kez daha yazıyorum.
reddedilip reddedilip reddedilmediğini görmek için her zaman oynatma 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ıların ilgisini çekmenin iyi bir yolu, sessiz otomatik oynatma özelliğini kullanarak sesi açmalarını seçmektir. (Aşağıdaki örneğe bakın.) Facebook, Instagram, Twitter ve YouTube gibi bazı web siteleri zaten bunu 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ştirmeyi tetikleyen etkinlikler hâlâ tarayıcılar arasında tutarlı bir şekilde tanımlanmalıdır. Şimdilik, "click" uygulamasında kalmanızı öneririz. GitHub sorunu whatwg/html#3849 sayfasına göz atın.
Web Sesi
Web Audio API, Chrome 71'den beri otomatik oynatma kapsamındadır. Bununla ilgili bilinmesi gereken birkaç şey var. Öncelikle, ses çalmaya başlamadan önce kullanıcı etkileşimini beklemek iyi bir uygulamadır. Böylece kullanıcılar bir şeyden haberdar olur. Örneğin "oynat" düğmesi veya "açma/kapatma" düğmesi kullanabilirsiniz. Uygulamanın akışına bağlı olarak bir "sesi aç" düğmesi de ekleyebilirsiniz.
Sayfa yüklenirken AudioContext öğesini oluşturursanız kullanıcı sayfayla etkileşimde bulunduktan bir süre sonra (ör. kullanıcı bir düğmeyi tıkladıktan sonra) resume() öğesini çağırmanız gerekir. Alternatif olarak, ekli herhangi bir düğümde start() çağrılırsa kullanıcı hareketinin ardından 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');
});
});
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 çalmak için kullanıcı etkileşimi gerektirip gerektirmediğini belirlemek üzere sesi oluşturduktan sonra AudioContext.state işaretini işaretleyin. Oynamaya izin veriliyorsa
hemen running moduna 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 için bu otomatik oynatma politikası kurallarında Web'de Ses çalmayı düzelten küçük Çekme İsteği'ne göz atın.