- Deweloperzy mogą teraz dostosowywać elementy sterujące multimediami, takie jak przyciski pobierania, pełnego ekranu i odtwarzania zdalnego.
- Witryny zainstalowane za pomocą funkcji „Dodaj do ekranu głównego” mogą automatycznie odtwarzać dźwięk i wideo w zakresie pliku manifestu.
- Chrome na Androida wstrzymuje teraz automatyczne odtwarzanie wyciszonego filmu, gdy jest on niewidoczny.
- Deweloperzy mogą teraz uzyskać dostęp do przybliżonego zakresu kolorów obsługiwanych przez Chrome i urządzenia wyjściowe za pomocą
color-gamutzapytania o media. - Podczas korzystania z rozszerzeń Media Source Extensions można teraz przełączać się między strumieniami zaszyfrowanymi i niezaszyfrowanymi.
Dostosowywanie opcji sterowania multimediami
Deweloperzy mogą teraz dostosowywać natywne elementy sterujące multimediami w Chrome, takie jak przyciski pobierania, pełnego ekranu i [remoteplayback], za pomocą nowego [interfejsu ControlsList API].
Ten interfejs API umożliwia wyświetlanie lub ukrywanie natywnych elementów sterujących multimediami, które nie mają sensu lub nie są częścią oczekiwanej obsługi przez użytkownika, albo zezwala na korzystanie tylko z ograniczonego zestawu funkcji.
Obecnie wdrożony mechanizm to lista blokowania w kontrolkach natywnych, z możliwością ustawiania ich bezpośrednio z treści HTML za pomocą nowego atrybutu controlsList. Zapoznaj się z oficjalnym przykładem.
Użycie w 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
Intent to Ship | Chromestatus Tracker | Chromium Bug
Autoodtwarzanie progresywnych aplikacji internetowych dodane do ekranu głównego
Wcześniej Chrome blokował wszystkie autoplay z dźwiękiem na Androidzie bez wyjątku. To już nie jest prawdą. Od teraz strony zainstalowane za pomocą ulepszonego procesu dodawania do ekranu głównego mogą automatycznie odtwarzać dźwięk i wideo
pochodzące 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>
<html>
<link rel="canonical" href="https://example.com/bar">
<audio autoplay src="https://cdn.com/file.mp4"></audio>
</html>
Intent to Ship | Chromestatus Tracker | Chromium Bug
Wstrzymywanie automatycznie odtwarzanego wyciszonego filmu, gdy jest niewidoczny
Jak być może wiesz, Chrome na Androidzie umożliwia mutedrozpoczęcie odtwarzania filmów bez interakcji użytkownika. Jeśli film jest oznaczony jako muted i ma atrybut autoplay, Chrome zaczyna odtwarzać film, gdy stanie się widoczny dla użytkownika.
Od Chrome 58, aby zmniejszyć zużycie energii, odtwarzanie filmów z atrybutem autoplay będzie wstrzymywane, gdy nie są one widoczne na ekranie, i wznawiane, gdy ponownie pojawią się na ekranie, zgodnie z działaniem przeglądarki Safari na iOS.
Intent to Ship | Chromestatus Tracker | Chromium Bug
zapytanie o multimedia dotyczące gamy kolorów,
Ekrany o szerokiej gamie kolorów stają się coraz bardziej popularne, więc witryny mogą teraz uzyskiwać dostęp do przybliżonego zakresu kolorów obsługiwanych 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, gamy, szerokiej gamy i głębi kolorów, gorąco polecam przeczytanie wpisu na blogu WebKit Improving Color on the Web (Poprawa kolorów w internecie). Zawiera on szczegółowe informacje o tym, jak używać color-gamut zapytania o media, aby wyświetlać obrazy o szerokiej gamie kolorów, gdy użytkownik korzysta z wyświetlacza o szerokiej gamie kolorów, a w innych przypadkach wyświetlać obrazy sRGB.
Obecna implementacja w Chrome akceptuje słowa kluczowe srgb, p3 (gamut określony przez przestrzeń kolorów DCI P3) i rec2020 (gamut określony przez przestrzeń kolorów ITU-R Recommendation BT.2020). Zapoznaj się z oficjalnym przykładem.
Użycie w 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 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")';
}