Aktualności multimedialne w Chrome 58

François Beaufort
François Beaufort
GitHub

Dostosowywanie opcji sterowania multimediami

Deweloperzy mogą teraz dostosowywać natywne elementy sterujące multimediami w Chrome, takie jak przyciski pobierania, pełnego ekranu i remoteplayback, za pomocą nowego interfejsu ControlsList API.

Natywne elementy sterujące multimediami w Chrome 58
Natywne elementy sterujące multimediami w Chrome 58

Ten interfejs API umożliwia wyświetlanie lub ukrywanie natywnych elementów sterujących multimediami, które nie mają sensu lub nie są częścią oczekiwanej obsługi przez użytkownika, albo zezwala na korzystanie tylko z ograniczonego zestawu funkcji.

Obecnie jest to mechanizm listy blokowania w przypadku natywnych elementów sterujących, które można ustawiać bezpośrednio z treści HTML za pomocą nowego atrybutu controlsList. Zapoznaj się z oficjalnym przykładem.

Użycie w HTML:

<video controls controlsList="nofullscreen nodownload noremoteplayback"></video>

Użycie w JavaScript:

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

Autoodtwarzanie progresywnych aplikacji internetowych dodane do ekranu głównego

Wcześniej Chrome blokował wszystkie autoplay z dźwiękiem na Androidzie bez wyjątku. To już nie jest prawdą. Od teraz strony zainstalowane za pomocą ulepszonego procesu dodawania do ekranu głównego mogą automatycznie odtwarzać dźwięk i wideoz źródeł objętych zakresem manifestu aplikacji internetowej bez ograniczeń.

{
  "name": "My Web App",
  "description": "An awesome app",
  "scope": "/foo",
  ...
}
Tak
<html>
  <link rel="canonical" href="https://example.com/foo">
  <audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>

Dźwięk będzie odtwarzany automatycznie, gdy /foo będzie w zakresie.

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

Nie udało się automatycznie odtworzyć dźwięku, ponieważ /bar nie jest w zakresie.

Intent to Ship | Chromestatus Tracker | Chromium Bug

Wstrzymywanie automatycznie odtwarzanego wyciszonego filmu, gdy jest niewidoczny

Jak zapewne wiesz, Chrome na Androidzie umożliwia mutedrozpoczęcie odtwarzania filmów bez interakcji użytkownika. Jeśli film jest oznaczony jako muted i ma atrybut autoplay, Chrome rozpoczyna odtwarzanie filmu, gdy staje się on widoczny dla użytkownika.

Od wersji 58 Chrome, aby zmniejszyć zużycie energii, odtwarzanie filmów z atrybutem autoplay będzie wstrzymywane, gdy nie są one widoczne na ekranie, i wznawiane, gdy ponownie pojawią się na ekranie, zgodnie z zachowaniem Safari na iOS.

Intent to Ship | Chromestatus Tracker | Chromium Bug

zapytanie o multimedia dotyczące gamy kolorów,

Ekrany o szerokiej gamie kolorów stają się coraz bardziej popularne, więc witryny mogą teraz uzyskiwać dostęp do przybliżonego zakresu kolorów obsługiwanych przez Chrome i urządzenia wyjściowe za pomocą zapytania o media color-gamut.

Jeśli nie znasz jeszcze definicji przestrzeni kolorów, profilu kolorów, gamy, szerokiej gamy i głębi kolorów, gorąco polecam Ci przeczytanie wpisu na blogu WebKit Poprawa kolorów w internecie. Zawiera szczegółowe informacje o tym, jak używać color-gamutzapytania o media, aby wyświetlać obrazy o szerokiej gamie kolorów, gdy użytkownik korzysta z wyświetlacza o szerokiej gamie kolorów, a w innych przypadkach wyświetlać obrazy sRGB.

Obecna implementacja w Chrome akceptuje słowa kluczowe srgb, p3 (gamut określony przez przestrzeń kolorów DCI P3) i rec2020 (gamut określony przez przestrzeń kolorów ITU-R Recommendation BT.2020). Zapoznaj się z oficjalnym przykładem.

Użycie w HTML:

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

Użycie w CSS:

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");
  }
}

Użycie w JavaScript:

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