- 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ındaki ses ve videoyu 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şebilirler. - Medya Kaynağı Uzantılarını kullanırken artık şifrelenmiş ve temiz akışlar arasında geçiş yapmak mümkündür.
Medya kontrollerini ö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, mantıklı olmayan, beklenen kullanıcı deneyiminin bir parçası olmayan veya yalnızca sınırlı bir özellik kümesine izin veren yerel medya denetimlerini gösterme ya da gizleme yöntemi sunar.
Şimdilik mevcut uygulama, yeni controlsList özelliğini kullanarak bunları doğrudan HTML içeriğinden ayarlama yeteneğine sahip yerel kontrollerde bir engellenenler listesi mekanizmasıdır. Resmi örneğe göz atın.
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ı
Ana ekrana Progresif Web Uygulamaları için Otomatik Oynatma özelliği eklendi
Önceden Chrome, Android'de tüm autoplay seslerini istisnasız bir şekilde engelliyordu. Bu durum artık geçerli değil. İyileştirilmiş Ana Ekrana Ekle akışını kullanarak yüklenen sitelerin artık web uygulaması manifest kapsamına dahil olan kaynaklardan sunulan ses ve videoları herhangi bir kısıtlama olmadan otomatik oynatmasına izin veriliyor.
{
"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>
/foo kapsama dahil olduğundan ses otomatik olarak çalınır.
<html> <link rel="canonical" href="https://example.com/bar"> <audio autoplay src="https://cdn.com/file.mp4"></audio> </html>
/bar, kapsam dahilinde OLMADIĞI için ses otomatik çalınamıyor.
Gönderim Amacı | Chromestatus İzleyici | Chromium Hatası
Görünmez olduğunda sesi kapatılmış 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, kullanıcı tarafından
görünür hale geldiğinde videoyu oynatmaya başlar.
Chrome 58'den itibaren güç kullanımını azaltmak için Safari iOS davranışına göre, autoplay özelliğine sahip videoların oynatılması ekran kapalıyken duraklatılacak ve tekrar görüntülendiğinde devam ettirilecek.
Gönderim Amacı | Chromestatus İzleyici | Chromium Hatası
renk gamı medya sorgusu
Geniş renk gamı ekranların giderek daha popüler hale gelmesiyle, siteler artık color-gamut medya sorgusunu kullanarak Chrome ve çıkış cihazlarının desteklediği 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 WebKit blog yayınını okumanızı önemle tavsiye ederiz. Bu bölümde, kullanıcı geniş aralıklı ekranlardayken ve aksi takdirde sRGB görüntülere geri döndüğünde geniş gamlı görüntüler sunmak için color-gamut medya sorgusunun nasıl kullanılacağı ayrıntılı bir şekilde açıklanıyor.
Chrome'daki mevcut uygulama, srgb, p3 (DCI P3 Renk Alanı tarafından belirtilen gam) ve rec2020 (ITU-R Recommendations BT.2020 Renk Alanı tarafından belirtilen gam) anahtar kelimelerini kabul etmektedir. Resmi örneğe göz atın.
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'deki 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")';
}