Aktualności multimedialne w Chrome 73

François Beaufort
François Beaufort
GitHub

W tym artykule omawiamy nowe funkcje multimedialne Chrome 73, które obejmują:

Obsługa klawiszy multimedialnych

Obecnie wiele klawiatur ma klawisze do sterowania podstawowymi funkcjami odtwarzania multimediów, takimi jak odtwarzanie/wstrzymywanie, poprzedni i następny utwór. Te funkcje są też dostępne w zestawach 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. Naciśnięcie klawisza odtwarzania powoduje wznowienie wstrzymanego wcześniej elementu multimedialnego i odebranie zdarzenia multimedialnego „play”. 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 sprzętowych kluczy 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.

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

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. Niestety nie jest to możliwe ze względu na wymaganie dotyczące 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>

Działa to w przybliżeniu:

  • 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.

Więcej informacji znajdziesz w specyfikacji. Możesz też skorzystać z oficjalnego szablonu 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. Okno „Obraz w obrazie” nie jest interaktywne, więc użytkownicy, którzy oglądają filmy w tej technologii, obecnie 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 pominięcia reklamy 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 widać poniżej, 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.
}

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 przyznane w przypadku aplikacji PWA 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 objętych zakresem pliku manifestu aplikacji internetowej.

Błąd w Chromium