W tym artykule omawiam nowe funkcje multimedialne w Chrome 73, w tym:
- Klawisze multimedialne są teraz obsługiwane na komputerach do sterowania odtwarzaniem multimediów.
- Deweloperzy internetowi mogą zapytać, czy można zastosować określone zasady HDCP.
- Automatyczny obraz w obrazie w wersjach na komputery z systemem operacyjnym Windows i przycisk „Pomiń reklamę” w trybie obrazu w obrazie są dostępne w wersjach próbnych na serwerach źródłowych.
- PWA na komputery mają autoodtwarzanie z dźwiękiem.
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. 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.
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” multimediów. 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 dźwięku 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. Ta funkcja jest obecnie obsługiwana tylko na urządzeniu 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 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. 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ą wersją dokumentacji dla deweloperów i spróbuj użyć oficjalnego przykładu, aby sprawdzić wszystkie obsługiwane wersje HDCP.
Intend to Ship | Chromestatus Tracker | Chromium Bug
Testowanie wersji oryginalnej automatycznego obrazu w obrazie dla zainstalowanych aplikacji PWA
Niektóre strony mogą automatycznie włączać i wyłączać obraz w obrazie dla elementu wideo. Przykładowo aplikacje internetowe do wideokonferencji mogą korzystać z automatycznego włączania i wyłączania 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>
Oto, jak to działa:
- Gdy dokument staje się ukryty, element wideo, którego atrybut
autopictureinpicturezostał ostatnio ustawiony, automatycznie przechodzi w tryb obrazu w obrazie, jeśli jest to dozwolone. - Gdy dokument staje się widoczny, element wideo w trybie obrazu w obrazie automatycznie opuszcza ten tryb.
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 przykładu 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 obrazu w oknie nie jest interaktywne, użytkownicy oglądający film w trybie obrazu w oknie 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.
Aby umożliwić tę funkcję, podczas wywoływania funkcji skipad prześlij funkcję skipad.setActionHandler() Aby go 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 oficjalny przykład „Pomiń reklamę” i powiedz nam, 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 regułę 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.