- 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.
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",
...
}
<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
.
<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”.
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