Videolar için sessiz otomatik oynatma özelliği, Android için Chrome'un 53 numaralı sürümünden itibaren desteklenmektedir. Hem autoplay hem de muted ayarlanmışsa bir video öğesi görünür hale geldiğinde oynatma otomatik olarak başlar ve sesi kapalı videoların oynatılması play() ile gerçekçi bir şekilde başlatılabilir. Daha önce, mobil cihazlarda oynatmanın sessiz duruma bakılmaksızın bir kullanıcı hareketiyle başlatılması gerekiyordu.
<video playsinline autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
Bu örneği ziyaret ederek bu özelliğin işleyiş şeklini görebilirsiniz. muted videosu, Chrome 53 veya sonraki sürümlerde otomatik olarak oynatılır.
Ayrıca, sessiz oynatma artık play() yöntemi kullanılarak başlatılabilir. Daha önce play() yalnızca düğme tıklaması gibi bir kullanıcı hareketinden kaynaklanıyorsa oynatmayı başlatıyordu. Android'de aşağıdaki iki demoyu karşılaştırın. Önce Chrome 53'te, ardından daha eski bir sürümde deneyin:
Mümkün olduğunda autoplay özelliğini, yalnızca gerektiğinde ise play() yöntemini kullanmanızı öneririz.
click gibi bir kullanıcı hareketine yanıt olarak videonun sesini programatik olarak açabilirsiniz. Ancak kullanıcı hareketi olmadan programatik olarak ses açmaya çalışırsanız oynatma duraklatılır.
muted autoplay değişikliği, play()'u DOM'da oluşturulmayan bir video öğesiyle (ör. WebGL oynatmayı desteklemek için) kullanmayı da mümkün kılar.
play() yöntemi, sessiz programatik oynatmanın etkin olup olmadığını kontrol etmek için kullanılabilecek bir promise döndürür. Buna örnek olarak simpl.info/video/scripted adresini inceleyebilirsiniz.
Bu değişiklik neden yapıldı?
Otomatik oynatma, Android'deki Chrome'un önceki sürümlerinde devre dışı bırakıldı. Bunun nedeni, otomatik oynatmanın rahatsız edici, veri yoğun olması ve birçok kullanıcının hoşuna gitmemesidir.
Otomatik oynatmayı devre dışı bırakmanın, geliştiricileri animasyonlu GIF'ler gibi alternatiflerin yanı sıra <canvas> ve <img> kırma programlarına yönlendirmesi gibi istenmeyen bir etkisi oldu. Bu teknikler, güç tüketimi, performans, bant genişliği gereksinimleri, veri maliyeti ve bellek kullanımı açısından optimize edilmiş videodan çok daha kötüdür. Video, animasyonlu GIF'lere kıyasla çok daha iyi sıkıştırma ile daha yüksek kalite sağlayabilir: ortalama 10 kat ve en iyi durumda 100 kata kadar. JavaScript'te video kod çözme mümkündür ancak pil gücünü büyük ölçüde tüketir.
Aşağıdakileri karşılaştırın. İlki bir video, ikincisi ise animasyonlu GIF'tir:
Resimleri birbirine çok benziyor ancak videonun boyutu 200 KB'tan küçük ve animasyonlu GIF'in boyutu 900 KB'tan büyük.
Chrome ve diğer tarayıcı tedarikçileri, kullanıcı bant genişliği konusunda son derece dikkatlidir. Birçok bağlamda, birçok kullanıcı için yüksek veri maliyeti, erişimi engelleyen en büyük faktördür. Çözüm yollarının yaygınlığı göz önüne alındığında, sessiz otomatik oynatma engellenemez. Bu nedenle, platformun yapabileceği en iyi şey iyi API'ler ve varsayılan değerler sunmaktır.
Web, giderek daha fazla medya merkezlidir. Tasarımcılar ve geliştiriciler, videoyu kullanmanın yeni ve beklenmedik yollarını bulmaya devam ediyor. Örneğin, tasarım öğesi olarak arka plan videosu kullanırken platformlar arasında tutarlı bir davranış görmek istiyorlar. Sessiz otomatik oynatma, hem mobil hem de masaüstünde bu tür işlevleri etkinleştirir.
İnce noktalar
- Erişilebilirlik açısından otomatik oynatma özellikle sorunlu olabilir. Android'deki Chrome 53 ve sonraki sürümlerde otomatik oynatmayı tamamen devre dışı bırakmak için bir ayar bulunur: Medya ayarlarından Otomatik oynat'ı seçin.
- Bu değişiklik,
audioöğesini etkilemez: Ses için sessiz otomatik oynatma pek anlamlı olmadığından Android'deki Chrome'da otomatik oynatma özelliği devre dışı bırakılmaya devam eder. - Veri Tasarrufu modu etkinse otomatik oynatma devre dışıdır. Veri Tasarrufu modu etkinse medya ayarlarında otomatik oynatma devre dışı bırakılır.
- Sessiz otomatik oynatma tüm görünür dokümanlardaki, iframe'lerdeki veya diğer tüm görünür video öğeleri için çalışır.
- Yeni davranıştan yararlanmak için
autoplayile birliktemutedparametresini de eklemeniz gerektiğini unutmayın: simpl.info/video ile simpl.info/video/muted adreslerini karşılaştırın.
Destek
- Sessiz otomatik oynatma, iOS 10 ve sonraki sürümlerde Safari tarafından desteklenir.
- Android'de sesli veya sessiz otomatik oynatma, Firefox ve UC Browser tarafından zaten destekleniyor. Bu tarayıcılar hiçbir tür otomatik oynatmayı engellemiyor.