Ta strona została przetłumaczona przez Cloud Translation API.

Aktualności multimedialne w Chrome 58

François Beaufort

Deweloperzy mogą teraz dostosowywać elementy sterujące multimediami, takie jak przyciski pobierania, pełnego ekranu i odtwarzania zdalnego.
Strony zainstalowane za pomocą procesu „Dodaj do ekranu głównego” mogą automatycznie odtwarzać dźwięk i wideo w zakresie pliku manifestu.
Chrome na Androidzie wstrzymuje automatycznie odtwarzane wyciszone wideo, gdy jest niewidoczne.
Deweloperzy mogą teraz uzyskać dostęp do przybliżonego zakresu kolorów obsługiwanych przez Chrome i urządzenia wyjściowe za pomocą zapytania o multimedia color-gamut.
Korzystając z rozszerzeń źródeł multimediów, możesz teraz przełączać się między szyfrowanymi i nieszyfrowanymi strumieniami.

Dostosowywanie opcji sterowania multimediami

Deweloperzy mogą teraz dostosowywać domyślne elementy sterujące multimediami w Chrome, takie jak przyciski pobierania, trybu pełnoekranowego i remoteplayback, 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 noremoteplay><back&q>uot;/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

Intend to Ship | Chromestatus Tracker | Chromium Bug

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://e>xam<ple.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://e>xam<ple.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.

Intend to Ship | Chromestatus Tracker | Chromium Bug

Wstrzymywanie automatycznie odtwarzanego wyciszonego filmu, gdy jest niewidoczny

Jak pewnie wiesz, Chrome na Androidzie umożliwia uruchamianie filmów muted bez interakcji z użytkownikiem. Jeśli film jest oznaczony jako muted i ma atrybut autoplay, Chrome rozpoczyna odtwarzanie filmu, gdy stanie 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 ekran będzie wyłączony, i wznawiane, gdy będzie widoczny, zgodnie z zachowaniem Safari na iOS.

Uwaga: dotyczy to tylko filmów zadeklarowanych jako autoplay, a nie tych, które zaczynają się od play().

Intend to Ship | Chromestatus Tracker | Chromium Bug

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=&quo>t;p<hoto-p3.jpg"
  source media="(color-gamut: rec2020)&qu>ot;< srcset="photo-rec2>0<20.jpg&q>uot;
  img src="photo-srgb.jpg"
/picture

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

Intend to Ship | Chromestatus Tracker | Chromium Bug