Aktualności multimedialne w Chrome 73

François Beaufort
François Beaufort
GitHub

W tym artykule omawiam 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. Także w przypadku zestawów słuchawkowych. Do tej pory użytkownicy komputerów nie mogli używać tych klawiszy multimedialnych do sterowania odtwarzaniem dźwięku i obrazu w Chrome. To się dziś zmienia.

Klawisze multimedialne
Klawisze multimedialne na klawiaturze

Jeśli użytkownik naciśnie klawisz pauzy, aktywny element multimediów odtwarzany w Chrome zostanie wstrzymany i otrzyma zdarzenie „wstrzymania” multimediów. Jeśli zostanie wciśnięty klawisz odtwarzania, wcześniej wstrzymany element multimediów zostanie wznowiony i otrzyma zdarzenie „odtwarzanie”. Działa on niezależnie od tego, czy Chrome jest na pierwszym planie czy w tle.

W ChromeOS aplikacje na Androida korzystające z fokusa audio będą teraz informować Chrome o wstrzymaniu i wznowieniu odtwarzania dźwięku, aby zapewnić płynne odtwarzanie multimediów w witrynach w Chrome, aplikacjach w Chrome i aplikacjach na Androida. Obecnie ta funkcja działa tylko na urządzeniach z ChromeOS z Androidem P.

Krótko mówiąc, warto zawsze śledzić te wydarzenia medialne i odpowiednio na nie reagować.

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. Teraz, gdy interfejs Media Session API jest dostępny na komputerach (wcześniej był obsługiwany tylko na urządzeniach mobilnych), deweloperzy internetowi mogą obsługiwać zdarzenia związane z multimediami, takie jak zmiana utworu, które są wywoływane przez klawisze multimedialne. Obecnie obsługiwane są zdarzenia previoustrack i nexttrack.

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 automatycznie przez Chrome. Jeśli jednak domyślne zachowanie nie działa zgodnie z Twoimi oczekiwaniami, możesz ustawić uchwyty działania dla „odtwarzania” i „wstrzymywania”, aby zapobiec temu.

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

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

Obsługa klawiszy multimedialnych jest dostępna w systemach ChromeOS, macOS i Windows. Linux pojawi się później.

Zapoznaj się z naszą dokumentacją dla deweloperów i spróbuj użyć oficjalnych przykładów kodu MediaSession.

Chromestatus Tracker | Chromium Bug

Zaszyfrowane multimedia: sprawdzanie zasad HDCP

Dzięki interfejsowi API do sprawdzania zgodności z zasadami HDCP deweloperzy internetowi mogą teraz sprawdzać, czy można zastosować określone zasady, np. wymagania HDCP, przed wysłaniem żądania licencji Widevine i wczytaniem 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. Jednak na niektórych platformach rzeczywiste kontrole zgodności z zasadami mogą być niedostępne. Na przykład sprawdzenie zgodności z zasadami HDCP będzie odrzucać z wartością NotSupportedError na Androidzie i w komponencie WebView na Androidzie.

Zapoznaj się z poprzednią dokumentacją dla deweloperów i skorzystaj z oficjalnego przykładu, aby zobaczyć wszystkie obsługiwane wersje HDCP.

Intend to Ship | Chromestatus Tracker | Chromium Bug

Origin Trial dla automatycznego obrazu w obrazie w zainstalowanych aplikacjach PWA

Niektóre strony mogą automatycznie włączać i wyłączać obraz w obrazie dla elementu wideo. Przykładowo aplikacje do wideokonferencji mogą korzystać z automatycznego obrazu w obrazie, gdy użytkownik przełącza się między aplikacją internetową a innymi aplikacjami lub kartami. Nie jest to jednak możliwe przy wymogu korzystania z gestów użytkownika. Oto automatyczny obraz w obrazie

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

<video autopictureinpicture></video>

Oto, jak to działa:

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

To wszystko. Pamiętaj, że funkcja automatycznego obrazu w obrazie dotyczy tylko progresywnych aplikacji internetowych zainstalowanych przez użytkowników na komputerach.

Sprawdź specyfikację, aby dowiedzieć się więcej, i wypróbuj oficjalną przykładową aplikację PWA.

Intencja eksperymentu | Chromestatus Tracker | Błąd w Chromium

Testowanie origin dla okna „Pomiń reklamę” w oknie obrazu w obrazie

Model reklamy wideo obejmuje zwykle reklamy przed filmem. Dostawcy treści często umożliwiają pominięcie reklamy po kilku sekundach. Niestety, ponieważ okno Picture-in-Picture nie jest interaktywne, użytkownicy oglądający film w trybie Picture-in-Picture nie mogą tego zrobić.

Teraz, gdy interfejs Media Session API jest dostępny na komputerach (wcześniej obsługiwany był tylko na urządzeniach mobilnych), można użyć nowego działania skipad sesji multimediów, aby zaoferować tę opcję w trybie obraz w obrazie.

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

Aby umożliwić tę funkcję, podczas wywołania funkcji skipad prześlij funkcję skipad. Aby ją ukryć, kliknij null. Jak zobaczysz poniżej, jest to dość 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.
}

Wypróbuj oficjalną próbkę „Pomiń reklamę” i daj nam znać, jak możemy ulepszyć tę funkcję.

Intencja eksperymentu | Chromestatus Tracker | Błąd w Chromium

Autoodtwarzanie w aplikacjach internetowych na komputery

Teraz, gdy progresywne aplikacje internetowe są dostępne na wszystkich platformach komputerowych, rozszerzamy zasadę obowiązującą na urządzeniach mobilnych na komputery: autoodtwarzanie z dźwiękiem jest teraz dozwolone w przypadku zainstalowanych PWA. Pamiętaj, że dotyczy to tylko stron w zakresie pliku manifestu aplikacji internetowej.

Błąd w Chromium