Chrome 58'deki medya güncellemeleri

François Beaufort
François Beaufort
GitHub

Medya kontrollerini özelleştirme

Geliştiriciler artık yeni ControlsList API'yi kullanarak Chrome'un yerel medya kontrollerini (ör. indirme, tam ekran ve remoteplayback düğmeleri) özelleştirebilir.

Chrome 58'deki yerel medya kontrolleri
Chrome 58'deki yerel medya kontrolleri

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 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

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 öğelerini 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",
  ...
}
Yapılması gerekenler
<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

/foo kapsamda olduğundan ses otomatik olarak oynatılır.

Yapılmaması gerekenler
<html>
  <link rel="canonical" href="https://example.com/bar">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

/bar kapsamda OLMADIĞI için ses otomatik olarak oynatılamıyor.

Intent to Ship | Chromestatus Tracker | Chromium Bug

Görünmezken otomatik oynatılan sessiz videoları 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ği olan videoların oynatılması, Safari iOS'in davranışına uygun olarak ekran kapalıyken duraklatılacak ve tekrar göründüğünde devam ettirilecektir.

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, renk gamı, geniş renk gamı ve renk derinliği tanımlarını henüz bilmiyorsanız Web'de Renkleri İyileştirme başlıklı WebKit blog yayınını okumanızı önemle tavsiye ederiz. Bu dokümanda, kullanıcının geniş gamlı ekran kullandığı durumlarda geniş gamlı resimler sunmak için color-gamut medya sorgusunun nasıl kullanılacağı ve aksi takdirde sRGB resimlerine nasıl geri dönüleceği ayrıntılı olarak açıklanmaktadır.

Chrome'daki mevcut uygulama, srgb, p3 (DCI P3 Renk Alanı tarafından belirtilen gam) ve rec2020 (ITU-R Tavsiyesi BT.2020 Renk Alanı tarafından belirtilen 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")';
}

Intent to Ship | Chromestatus Tracker | Chromium Bug