- 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 videoları otomatik olarak oynatabilir.
- Android'de Chrome artık görünmez olduğunda sessiz videoların otomatik oynatılmasını 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. - Media Source Extensions kullanılırken artık şifrelenmiş ve şifrelenmemiş akışlar arasında geçiş yapmak mümkün.
Medya kontrollerini özelleştirme
Geliştiriciler artık [ControlsList API]'yi kullanarak Chrome'un yerel medya kontrollerini (ör. indirme, tam ekran ve [remoteplayback] düğmeleri) özelleştirebilir.
Bu API, anlamlı olmayan veya beklenen kullanıcı deneyiminin bir parçası olmayan ya da yalnızca sınırlı bir özellik grubuna izin veren yerel medya kontrollerini göstermek veya gizlemek için bir yol sunar.
Şu anki uygulama, yeni controlsList özelliği kullanılarak doğrudan HTML içeriğinden ayarlanabilen yerel kontrollerdeki 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
Intent to Ship | Chromestatus Tracker | Chromium Bug
Progresif web uygulamaları için otomatik oynatma özelliği ana ekrana eklendi
Daha önce Chrome, Android'de sesli tüm autoplay'ları istisnasız olarak engelliyordu. Bu durum artık geçerli değil. Bundan sonra, geliştirilmiş Ana Ekrana Ekleme akışı kullanılarak yüklenen sitelerin, web uygulaması manifestosunun kapsamına dahil olan kaynaklardan sunulan ses ve videoları kısıtlama olmadan otomatik olarak oynatmasına izin verilir.
{
"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>
Intent to Ship | Chromestatus Tracker | Chromium Bug
Görünmez olduğunda otomatik oynatılan sessiz videoyu duraklatma
Android'deki Chrome'un, kullanıcı etkileşimi olmadan muted videolarının oynatılmasına izin verdiğini biliyor olabilirsiniz. Bir video muted olarak işaretlenmişse ve autoplay özelliği varsa Chrome, video kullanıcıya görünür hale geldiğinde oynatmaya başlar.
Chrome 58'den itibaren, güç kullanımını azaltmak için autoplay özelliğiyle oynatılan videoların ekran dışındayken oynatılması duraklatılacak ve Safari iOS davranışına uygun olarak tekrar görünür olduğunda oynatılmaya devam edilecek.
Intent to Ship | Chromestatus Tracker | Chromium Bug
color-gamut 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, gamut, geniş gamut ve renk derinliği tanımlarını henüz bilmiyorsanız Web'de Rengi İyileştirme başlıklı WebKit blog yayınını okumanızı önemle tavsiye ederiz. Bu makalede, kullanıcı geniş gamutlu ekran kullanırken geniş gamutlu resimler sunmak ve aksi takdirde sRGB resimlerine geri dönmek için color-gamut medya sorgusunun nasıl kullanılacağı ayrıntılı olarak açıklanmaktadır.
Chrome'daki mevcut uygulama, srgb, p3 (DCI P3 Renk Alanı tarafından belirtilen renk gamı) ve rec2020 (ITU-R Önerisi BT.2020 Renk Alanı tarafından belirtilen renk gamı) anahtar kelimelerini kabul eder. 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'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")';
}