- Geliştiriciler artık indirme, tam ekran ve uzaktan oynatma düğmeleri gibi medya kontrollerini özelleştirebilir.
- "Ana ekrana ekle" akışı kullanılarak yüklenen siteler, manifest kapsamında ses ve videoları otomatik oynatabilir.
- Android'deki Chrome artık sessiz bir videoyu görünmez olduğunda otomatik oynatmayı duraklatıyor.
- Geliştiriciler artık
color-gamutMedia Query'yi kullanarak Chrome ve çıkış cihazları tarafından desteklenen yaklaşık renk aralığına erişebilir. - Medya Kaynağı Uzantıları'nı kullanırken artık şifrelenmiş ve temiz akışlar arasında geçiş yapmak mümkündür.
Medya denetimlerini özelleştirme
Geliştiriciler artık yeni [ControlsList API]'yi kullanarak indir, tam ekran ve [remoteplayback] düğmeleri gibi Chrome'un yerel medya kontrollerini özelleştirebilirler.
Bu API, anlam ifade etmeyen, beklenen kullanıcı deneyiminin bir parçası olmayan veya yalnızca sınırlı bir özellik grubuna izin veren yerel medya kontrollerini gösterme veya gizleme yöntemi sunar.
Şimdilik mevcut uygulama, yerel kontrollerdeki engellenenler listesi mekanizmasıdır. Bu mekanizmayı, yeni controlsList özelliğini kullanarak doğrudan HTML içeriğinden ayarlayabilirsiniz. Resmi örneği inceleyin.
HTML'de kullanım:
<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>
JavaScript'te kullanım:
var video = document.querySelector('video');
video.controls; // true
video.controlsList; // ["nofullscreen", "nodownload", "noremoteplayback"]
video.controlsList.remove('noremoteplayback');
video.controlsList; // ["nofullscreen", "nodownload"]
video.getAttribute('controlsList'); // "nofullscreen nodownload"
video.controlsList.supports('foo'); // false
video.controlsList.supports('noremoteplayback'); // true
Gönderim Amacı | Chromestatus İzleyici | Chromium Hatası
Progresif Web Uygulamaları için otomatik oynatma ana ekrana eklendi
Önceden Chrome, Android'de istisnasız tüm autoplay sesli dosyaları engelliyordu. Bu durum artık geçerli değil. Artık, iyileştirilmiş Ana Ekrana Ekle akışı kullanılarak yüklenen sitelerin, web uygulaması manifestinin kapsamına dahil olan kaynaklardan sunulan ses ve videoları herhangi bir kısıtlama olmadan otomatik oynatmasına izin verilecek.
{
"name": "My Web App",
"description": "An awesome app",
"scope": "/foo",
...
}
<html>
<link rel="canonical" href="https://example.com/foo">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
<html>
<link rel="canonical" href="https://example.com/bar">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
Gönderim Amacı | Chromestatus İzleyici | Chromium Hatası
Görünmez olduğunda sessiz videoyu otomatik oynatmayı duraklat
Bildiğiniz gibi Android'de Chrome, muted videoların kullanıcı etkileşimi olmadan oynatılmaya başlamasına izin verir. Bir video muted olarak işaretlenmişse ve autoplay
özelliğine sahipse Chrome, videoyu oynatmaya başlar ve kullanıcı tarafından
görünür hale gelir.
Chrome 58'den itibaren güç kullanımını azaltmak için autoplay
özelliğine sahip videoların oynatılması, Safari iOS davranışı uyarınca ekran
dışında duraklatılıp tekrar görüntülenirken devam ettirilecek.
Gönderim Amacı | Chromestatus İzleyici | Chromium Hatası
renk gamı medya sorgusu
Geniş renk gamı ekranları giderek daha popüler hale geldiğinden, siteler artık color-gamut medya sorgusunu kullanarak Chrome ve çıkış cihazları tarafından desteklenen yaklaşık renk aralığına erişebilir.
Renk alanı, renk profili, gam, geniş gam ve renk derinliği tanımlarını henüz bilmiyorsanız Web'de Rengi İyileştirme adlı WebKit blog yayınını okumanızı önemle tavsiye ederiz. Bu örnekte, kullanıcı geniş yelpazeli ekranlarda olduğunda geniş yelpazeli görüntüler sunmak için color-gamut medya sorgusunun nasıl kullanılacağı ve aksi takdirde sRGB görüntülere nasıl geçileceğiyle ilgili çok ayrıntılı bilgi verilmektedir.
Chrome'daki mevcut uygulama; srgb, p3 (DCI P3 Renk Alanı tarafından belirtilen gam) ve rec2020 (ITU-R Önerisi BT.2020 Renk Alanı tarafından belirtilen gam) anahtar kelimelerini kabul etmektedir. Resmi örneği inceleyin.
HTML'de kullanım:
<picture>
<source media="(color-gamut: p3)" srcset="photo-p3.jpg">
<source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
<img src="photo-srgb.jpg">
</picture>
CSS'de kullanım:
main {
background-image: url("photo-srgb.jpg");
}
@media (color-gamut: p3) {
main {
background-image: url("photo-p3.jpg");
}
}
@media (color-gamut: rec2020) {
main {
background-image: url("photo-rec2020.jpg");
}
}
JavaScript'te kullanım:
// It is expected that the majority of color displays will return true.
if (window.matchMedia("(color-gamut: srgb)").matches) {
document.querySelector('main').style.backgroundImage = 'url("photo-srgb.jpg")';
}
if (window.matchMedia("(color-gamut: p3)").matches) {
document.querySelector('main').style.backgroundImage = 'url("photo-p3.jpg")';
}
if (window.matchMedia("(color-gamut: rec2020)").matches) {
document.querySelector('main').style.backgroundImage = 'url("photo-rec2020.jpg")';
}