- 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].
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 elementach natywnych z możliwością ich ustawiania bezpośrednio z treści HTML za pomocą nowego atrybutu controlsList. Zapoznaj się z oficjalnym plikiem przykładowym.
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
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",
...
}
<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>
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 udziału 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.
Od wersji 58 Chrome, aby zmniejszyć zużycie energii, odtwarzanie filmów z atrybutem autoplay będzie wstrzymywane, gdy film nie będzie widoczny na ekranie, i wznawiane, gdy znowu będzie widoczny, zgodnie z zachowaniem Safari na iOS.
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="photo-p3.jpg">
<source media="(color-gamut: rec2020)" srcset="photo-rec2020.jpg">
<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")';
}