Aktualizacje dźwięku i wideo w Chrome 58

François Beaufort
François Beaufort
GitHub

Dostosowywanie opcji sterowania multimediami

Za pomocą nowego interfejsu [ControlsList API] deweloperzy mogą teraz dostosować natywne elementy sterujące Chrome, takie jak przycisk pobierania, przycisk pełnoekranowy i [remoteplayback].

Natywne elementy sterujące multimediami w Chrome 58
Rysunek 1. 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, nie są zgodne z oczekiwaniami użytkownika lub zezwalają tylko na ograniczony zestaw funkcji.

Obecnie implementacja to mechanizm listy zablokowanych w natywnych elementach sterujących, który umożliwia ustawianie ich bezpośrednio z treści HTML za pomocą nowego atrybutu controlsList. Przeczytaj oficjalną próbkę.

Wykorzystanie w kodzie HTML:

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

Wykorzystanie w JavaScripcie:

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

Prośba o wysyłkę | Narzędzie do śledzenia stanu Chrome | Błąd Chromium

Autoodtwarzanie w progresywnych aplikacjach internetowych zostało dodanych do ekranu głównego

Wcześniej Chrome bez wyjątków blokował autoplay z dźwiękiem na urządzeniach z Androidem. To już nieprawda. Od teraz witryny instalowane za pomocą ulepszonego procesu dodawania do ekranu głównego mogą automatycznie odtwarzać dźwięk i film ze źródeł uwzględnionych w zakresie manifestu aplikacji internetowej bez ograniczeń.

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

Prośba o wysyłkę | Narzędzie do śledzenia stanu Chrome | Błąd Chromium

Wstrzymaj autoodtwarzanie wyciszonego filmu, gdy film jest niewidoczny

Jak już zapewne wiesz, Chrome na Androida pozwala odtwarzać filmy z muted bez interakcji użytkownika. Jeśli film jest oznaczony jako muted i ma atrybut autoplay, Chrome rozpoczyna odtwarzanie filmu, gdy stanie się on widoczny dla użytkownika.

Aby zmniejszyć zużycie energii, od Chrome 58 odtwarzanie filmów z atrybutem autoplay będzie wstrzymywane, gdy użytkownik znajduje się poza ekranem, i wznawiane, gdy znowu będzie na ekranie, zgodnie z działaniami Safari na iOS”.

Prośba o wysyłkę | Narzędzie do śledzenia stanu Chrome | Błąd Chromium

zapytanie o media w gamie kolorów

Ponieważ ekrany o szerokiej gamie kolorów stają się coraz bardziej popularne, witryny mogą teraz korzystać z przybliżonej gamy kolorów obsługiwanych przez Chrome i urządzeń wyjściowych, korzystając z zapytania o multimedia color-gamut.

Jeśli nie wiesz, czym są przestrzenie kolorów, profil kolorów, gama, szeroki kąt i głębia kolorów, polecam przeczytanie posta na blogu WebKit o ulepszaniu kolorów w internecie. Zawiera szczegółowe informacje o tym, jak używać zapytania o media color-gamut do wyświetlania obrazów o szerokiej gamie, gdy użytkownik korzysta z ekranów o szerokiej gamie, a w przeciwnym razie do obrazów sRGB.

Obecna implementacja w Chrome akceptuje słowa kluczowe srgb, p3 (gama określonych przez DCI P3 Color Space) i rec2020 (gama określona przez ITU-R Recommendations BT.2020). Przeczytaj oficjalną próbkę.

Wykorzystanie w kodzie 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>

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

Wykorzystanie w JavaScripcie:

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

Prośba o wysyłkę | Narzędzie do śledzenia stanu Chrome | Błąd Chromium