Kullanıcı deneyimini iyileştirdi, reklam engelleyici yükleme teşviklerini en aza indirdi ve veri tüketimini azalttı
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.
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:
- Kullanıcı, alanla etkileşime geçmiştir (tıklama, dokunma vb.).
- Masaüstünde kullanıcının Medya Etkileşim İndeksi eşiğin aşılması, kullanıcının videoyu daha önce oynattığı anlamına gelir bir şeydir.
- Kullanıcı, mobil cihazda veya siteyi ana ekranına eklemiştir. masaüstüne PWA'yı yüklemiştir.
- Ü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.
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.