Aktualności multimedialne w Chrome 58

François Beaufort
François Beaufort
GitHub

Dostosowywanie opcji sterowania multimediami

Deweloperzy mogą teraz dostosowywać domyślne elementy sterujące multimediami w Chrome, takie jak przyciski pobierania, trybu pełnoekranowego i odtwarzania zdalnego, za pomocą nowego interfejsu ControlsList API.

Natywne elementy sterujące multimediami w Chrome 58
Natywny element sterujący multimediami w Chrome 58

Ten interfejs API umożliwia wyświetlanie lub ukrywanie elementów sterowania multimediami, które nie mają sensu lub nie są częścią oczekiwanego przez użytkownika interfejsu, albo umożliwiają tylko ograniczony zestaw funkcji.

Obecna implementacja to mechanizm listy zablokowanych elementów w przypadku elementów natywnych z możliwością ich ustawiania bezpośrednio z treści HTML za pomocą nowego atrybutu controlsList. Zapoznaj się z oficjalnym plikiem źródłowym.

Użycie w kodzie 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

Zamiar wysyłki | Narzędzie do śledzenia stanu Chrome | Błąd w Chromium

Autoodtwarzanie progresywnych aplikacji internetowych zostało dodane do ekranu głównego

Wcześniej Chrome blokował wszystkie autoplay z dźwiękiem na Androidzie bez wyjątku. To już nieprawda. Od teraz strony instalowane za pomocą ulepszonej procedury dodawania do ekranu głównego mogą automatycznie odtwarzać dźwięk i obraz z źródeł uwzględnionych w zakresie pliku 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, ponieważ /foo znajduje się w zakresie.

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

Dźwięk nie odtwarza się automatycznie, ponieważ /bar NIE jest objęty zakresem.

Zamiar wysyłki | Narzędzie do śledzenia stanu Chrome | Błąd w Chromium

Wstrzymywanie automatycznie odtwarzanego wyciszonego filmu, gdy jest niewidoczny

Jak pewnie wiesz, Chrome na Androidzie umożliwia uruchamianie filmów muted bez udziału użytkownika. Jeśli film jest oznaczony jako muted i ma atrybut autoplay, Chrome rozpocznie jego odtwarzanie, gdy stanie się widoczny dla użytkownika.

Od wersji 58 Chrome, aby zmniejszyć zużycie energii, odtwarzanie filmów z atrybutem autoplay będzie wstrzymywane, gdy ekran będzie wyłączony, i wznawiane, gdy będzie widoczny, zgodnie z zachowaniem Safari na iOS.

Zamiar wysyłki | Narzędzie do śledzenia stanu Chrome | Błąd w Chromium

zapytanie multimedialne color-gamut,

Ponieważ ekrany o szerokim zakresie kolorów stają się coraz bardziej popularne, witryny mogą teraz uzyskiwać dostęp do przybliżonego zakresu kolorów obsługiwanego 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, gamutu, szerokiego gamutu i głębi kolorów, przeczytaj wpis na blogu WebKit Ulepszanie kolorów w Internecie. Zawiera on szczegółowe informacje o tym, jak używać zapytania o multimedia color-gamut, aby wyświetlać obrazy o szerokim zakresie, gdy użytkownik korzysta z wyświetlaczy o szerokim zakresie, a w przeciwnym razie wyświetlać obrazy sRGB.

Obecna implementacja w Chrome akceptuje słowa kluczowe srgb, p3 (przestrzeń określona przez przestrzeń kolorów DCI P3) i rec2020 (przestrzeń określona przez rekomendację ITU-R dotyczącą przestrzeni kolorów BT.2020). Zapoznaj się z oficjalnym plikiem źródłowym.

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

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

Zamiar wysyłki | Narzędzie do śledzenia stanu Chrome | Błąd w Chromium