Aktualności multimedialne w Chrome 73

François Beaufort
François Beaufort
GitHub

W tym artykule omówię nowe funkcje multimedialne w Chrome 73, w tym:

Obsługa sprzętowych kluczy multimedialnych

Obecnie wiele klawiatur ma klawisze do sterowania podstawowymi funkcjami odtwarzania multimediów, takimi jak odtwarzanie/wstrzymywanie, poprzedni i następny utwór. Są one też dostępne w zestawach słuchawkowych. Do tej pory użytkownicy komputerów nie mogli sterować odtwarzaniem dźwięku i filmów w Chrome za pomocą tych klawiszy multimedialnych. To się zmienia dzisiaj.

Klawisze multimedialne na klawiaturze
Klawisze multimedialne na klawiaturze

Jeśli użytkownik naciśnie klawisz wstrzymania, aktywny element multimedialny odtwarzany w Chrome zostanie wstrzymany i zostanie zarejestrowane zdarzenie multimedialne „paused”. Po naciśnięciu klawisza odtwarzania zostanie wznowione wstrzymane wcześniej element multimedialny i zostanie zarejestrowane zdarzenie multimedialne „odtwórz”. Działa ona niezależnie od tego, czy Chrome działa na pierwszym planie, czy w tle.

W ChromeOS aplikacje na Androida zaznaczające dźwięk będą teraz informować Chrome o wstrzymywaniu i wznawianiu odtwarzania dźwięku, co umożliwia płynne korzystanie z multimediów między stronami w Chrome, aplikacjach Chrome i aplikacjach na Androida. Ta funkcja jest obecnie obsługiwana tylko na urządzeniach z ChromeOS z Androidem P.

Krótko mówiąc, warto zawsze słuchać takich zdarzeń i działać zgodnie z zasadami.

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

Poczekaj, to jeszcze nie wszystko. Dzięki interfejsowi Media Session API, który jest już dostępny na komputerach (wcześniej był obsługiwany tylko na urządzeniach mobilnych), programiści mogą obsługiwać zdarzenia związane z multimediami (np. zmianę ścieżki), które są wywoływane przez klawisze multimedialne. Zdarzenia previoustrack i nexttrack są obecnie obsługiwane.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

Klawisze odtwarzania i wstrzymywania są obsługiwane przez Chrome automatycznie. Jeśli jednak domyślne działanie Ci nie odpowiada, nadal możesz ustawić moduły obsługi działań „odtwórz” i „wstrzymaj”, aby temu zapobiec.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

Obsługa sprzętowych kluczy multimedialnych jest dostępna w systemach ChromeOS, macOS i Windows. Linux zostanie udostępniony później.

Zapoznaj się z naszą dokumentacją dla programistów i wypróbuj przykłady oficjalnej sesji multimedialnej.

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

Zaszyfrowane multimedia: sprawdzenie zgodności z zasadami HDCP

Dzięki interfejsowi HDCP Policy Check API deweloperzy stron internetowych mogą teraz określać, czy określona zasada, np. wymagania HDCP, może zostać egzekwowana przed żądaniem licencji na Widevine i wczytywaniem multimediów.

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

Interfejs API jest dostępny na wszystkich platformach. Na niektórych platformach sprawdzanie zgodności z zasadami może jednak nie być możliwe. Na przykład obietnica sprawdzenia zasad HDCP zostanie odrzucona z NotSupportedError na Androidzie i komponencie WebView Androida.

Zapoznaj się z naszą poprzednią dokumentacją dla deweloperów i wypróbuj oficjalny przykład, by zobaczyć wszystkie obsługiwane wersje HDCP.

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

Wersja próbna automatycznego obrazu w obrazie w zainstalowanych aplikacjach PWA

Niektóre strony mogą chcieć automatycznie wstawiać i otwierać obraz w obrazie jako element wideo. Na przykład aplikacje internetowe do rozmów wideo mogłyby korzystać z funkcji automatycznego wyświetlania obrazu w obrazie, gdy użytkownik przełącza się między aplikacją internetową a innymi aplikacjami czy kartami. Niestety nie jest to możliwe w przypadku wymóg korzystania z gestów użytkownika. Dlatego udostępniamy automatyczne funkcje obrazu w obrazie.

Aby umożliwić przełączanie kart i aplikacji, do elementu <video> dodawany jest nowy atrybut autopictureinpicture.

<video autopictureinpicture></video>

Działa to w przybliżeniu w ten sposób:

  • Gdy dokument zostaje ukryty, element wideo, którego atrybut autopictureinpicture został ostatnio ustawiony, automatycznie przechodzi do obrazu w obrazie (jeśli jest to dozwolone).
  • Gdy dokument staje się widoczny, element wideo w trybie obrazu w obrazie automatycznie go opuszcza.

Gotowe! Pamiętaj, że funkcja automatycznego obrazu w obrazie działa tylko w progresywnych aplikacjach internetowych zainstalowanych przez użytkowników na komputerach.

Sprawdź spec, aby uzyskać więcej informacji, i wypróbuj oficjalną przykładową aplikację PWA.

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

Wersja próbna origin w przypadku pomijania reklam w oknie obrazu w obrazie

Model reklamy wideo zwykle składa się z reklam przed filmem. Dostawcy treści często umożliwiają pominięcie reklamy po kilku sekundach. Okno obraz w obrazie nie jest interaktywne, więc użytkownicy oglądający ten film obecnie nie mogą tego zrobić.

Dzięki interfejsowi Media Session API, który jest już dostępny na komputerach (wcześniej był obsługiwany tylko na urządzeniach mobilnych), można skorzystać z nowego działania w sesji multimedialnej (skipad), aby udostępnić tę opcję w funkcji Obraz w obrazie.

Przycisk Pomiń reklamę w oknie obrazu w obrazie
Przycisk „Pomiń reklamę” w oknie obrazu w obrazie

Aby udostępnić tę funkcję, przekaż funkcję skipad podczas wywoływania metody setActionHandler(). Aby ukryć kartę, null. Jak widać poniżej, jest to całkiem proste.

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

Zapoznaj się z oficjalnym przykładem funkcji „Pomiń reklamę” i daj nam znać, jak można ulepszyć tę funkcję.

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

Automatyczne odtwarzanie aplikacji PWA na komputery zostało przyznane

Teraz, gdy progresywne aplikacje internetowe są dostępne na wszystkich platformach stacjonarnych, rozszerzamy regułę, która była stosowana w przypadku urządzeń mobilnych na komputery: w zainstalowanych aplikacjach PWA można teraz używać autoodtwarzania z dźwiękiem. Pamiętaj, że dotyczy to tylko stron uwzględnionych w zakresie pliku manifestu aplikacji internetowej.

Błąd Chromium