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 zdalnego odtwarzania.
Witryny zainstalowane przy użyciu opcji „Dodaj do ekranu głównego” mogą autoodtwarzać dźwięk i obraz w zakresie pliku manifestu.
Chrome na Androidzie wstrzymuje teraz autoodtwarzanie wyciszonego filmu, gdy jest on niewidoczny.
Za pomocą zapytania o multimedia color-gamut deweloperzy mogą teraz wyświetlać przybliżoną paletę kolorów obsługiwanych przez Chrome i urządzenia wyjściowe.
Korzystając z rozszerzeń źródeł multimediów, możesz teraz przełączać się między zaszyfrowanymi a czystymi strumieniami.

Dostosowywanie opcji sterowania multimediami

Za pomocą nowego interfejsu ControlsList API programiści mogą teraz dostosować natywne elementy sterujące multimediami w Chrome, takie jak przyciski pobierania, pełnego ekranu i remoteplayback.

Natywne elementy sterujące multimediami w Chrome 58

Ten interfejs API umożliwia pokazywanie lub ukrywanie natywnych elementów sterujących multimediami, które nie mają sensu lub nie odpowiadają oczekiwanemu interfejsowi użytkownika, lub dopuszczają tylko ograniczony zestaw funkcji.

Obecnie obecna implementacja to mechanizm listy zablokowanych w natywnych elementach sterujących, który umożliwia konfigurowanie 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 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 Chromium

Autoodtwarzanie progresywnych aplikacji internetowych dodanych do ekranu głównego

Wcześniej Chrome bez wyjątku blokował na Androidzie wszystkie autoplay z dźwiękiem. To już nieprawda. Od teraz witryny zainstalowane przy użyciu ulepszonego procesu dodawania do ekranu głównego mogą automatycznie odtwarzać dźwięk i obraz ze źródeł uwzględnionych w zakresie 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 autoodtwarzany, gdy w zakresie znajdzie się /foo.

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ż element /bar NIE należy do zakresu.

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

Wstrzymaj autoodtwarzanie wyciszonych filmów, gdy film jest niewidoczny

Jak już zapewne wiesz, Chrome na Androida umożliwia odtwarzanie filmów z systemu muted bez interakcji użytkownika. Jeśli film jest oznaczony jako muted i ma atrybut autoplay, Chrome rozpocznie odtwarzanie filmu, gdy stanie się on widoczny dla użytkownika.

Aby zmniejszyć zużycie energii, od Chrome w wersji 58 odtwarzanie filmów z atrybutem autoplay będzie wstrzymywane po wyłączeniu ekranu i wznawiane po ponownym wyświetleniu w przeglądarce Safari w iOS”.

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

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

zapytanie o media o gamie kolorów

W miarę jak coraz bardziej popularne są ekrany o szerokiej gamie kolorów, witryny mogą teraz korzystać z przybliżonego zakresu kolorów obsługiwanych przez Chrome i urządzeń wyjściowych, korzystając z zapytania o multimedia color-gamut.

Jeśli jeszcze nie znasz definicji przestrzeni kolorów, profilu kolorów, gamy, szerokiej gamy i głębi kolorów, zalecamy 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 szerokopasmowych i wraca do obrazów sRGB.

Obecna implementacja w Chrome akceptuje słowa kluczowe srgb, p3 (gamut określone 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 usłudze porównywania cen:

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