Aktualności multimedialne w Chrome 73

François Beaufort
François Beaufort

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

Obsługa sprzętowych kluczy multimedialnych

Obecnie wiele klawiatur ma klawisze do sterowania podstawowymi funkcjami odtwarzania multimediów, odtwarzanie/wstrzymanie, poprzedni i następny utwór. Te funkcje są też dostępne w zestawach słuchawkowych. Tymczasem użytkownicy komputerów nie mogą używać tych klawiszy multimedialnych do sterowania odtwarzaniem dźwięku i filmu w Chrome. Zmiana nastąpi dzisiaj!

Klawisze multimedialne na klawiaturze
Klawisze multimedialne na klawiaturze

Jeśli użytkownik naciśnie klawisz pauzy, aktywny element multimedialny odtwarzany w Chrome zostaną wstrzymane i staną się „wstrzymane”, zdarzenie multimedialne. Po naciśnięciu klawisza odtwarzania wcześniej wstrzymany element multimedialny zostanie wznowiony i zostanie odtworzony multimedia . Działa niezależnie od tego, czy Chrome działa na pierwszym planie, czy w tle.

W ChromeOS aplikacje na Androida korzystające z fokusu audio będą teraz informować Chrome o wstrzymaniu wznów odtwarzanie dźwięku, aby umożliwić płynne korzystanie z multimediów między witrynami w Chrome, Aplikacje Chrome i aplikacje na Androida. Ta funkcja jest obecnie obsługiwana tylko w ChromeOS na urządzeniu z Androidem P.

Krótko mówiąc, warto wsłuchać się w te wydarzenia medialne i podejmować odpowiednie działania, odpowiednio się zmienia.

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 teraz dostępny na komputerach (wcześniej była obsługiwana tylko na urządzeniach mobilnych), programiści stron internetowych mogą obsługiwać multimedia powiązanych zdarzeń, np. zmian śledzenia, 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 automatycznie przez Chrome. Jeśli jednak domyślna wartość nie odpowiada Ci, nadal możesz ustawić niektóre moduły obsługi działań dla „play” 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 pojawią się później.

Zapoznaj się z dotychczasową dokumentacją dla programistów i wypróbuj oficjalne media Przykłady sesji.

Tracker Chromestatus | Błąd Chromium

Zaszyfrowane multimedia: sprawdzanie zasad HDCP

Dzięki HDCP Policy Check API programiści stron internetowych mogą teraz sprawdzać, czy konkretnej zasady, np. Wymóg HDCP, może być egzekwowany przed wysłaniem prośby Licencje Widevine i wczytuję multimedia.

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. Faktyczne kontrole zgodności z zasadami mogą jednak mogą być niedostępne na niektórych platformach. Na przykład obietnica sprawdzenia zgodności z zasadami HDCP odrzuci za pomocą NotSupportedError na Androidzie i komponencie WebView na Androidzie.

Zapoznaj się z poprzednią dokumentacją dla deweloperów i spróbuj oficjalnej przykład, aby zobaczyć wszystkie obsługiwane wersje HDCP.

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

Wersja próbna automatycznych funkcji obrazu w obrazie w przypadku zainstalowanych aplikacji PWA

Niektóre strony mogą chcieć automatycznie przejść do obrazu w obrazie i opuścić go na element video; na przykład aplikacje internetowe do rozmów wideo mogłyby skorzystać automatyczne działanie funkcji obraz w obrazie, gdy użytkownik przełącza się między trybami aplikacji internetowej i innych aplikacji lub kart. Niestety nie jest to możliwe w przypadku wymagań gestu użytkownika. Oto funkcja automatycznego obrazu w obrazie.

W celu obsługi przełączania się między kartami i aplikacjami wprowadziliśmy nowy atrybut autopictureinpicture został dodany do elementu <video>.

<video autopictureinpicture></video>

Działa to w przybliżeniu:

  • Gdy dokument zostanie ukryty, element wideo, którego atrybut autopictureinpicture atrybut został ustawiony jako ostatni, automatycznie przechodzi w tryb obraz w obrazie, jeśli jest dozwolona.
  • Gdy dokument staje się widoczny, element wideo w trybie obraz w obrazie automatycznie go opuści.

To wszystko. Pamiętaj, że funkcja automatycznego obrazu w obrazie dotyczy tylko Progresywne aplikacje internetowe, które użytkownicy zainstalowali na komputerze.

Sprawdź specyfikację, aby dowiedzieć się więcej, i wypróbuj ją, używając oficjalnej aplikacji PWA. przykład.

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

Wersja próbna origin pomijania reklamy w oknie obraz w obrazie

Model reklamy wideo zwykle składa się z reklam przed filmem. Content (sieć partnerska), dostawcy często umożliwiają pominięcie reklamy po kilku sekundach. Niestety, Okno Obraz w obrazie nie jest interaktywne, więc użytkownicy oglądający film Funkcja obraz w obrazie nie jest obecnie dostępna.

Dzięki interfejsowi Media Session API, który jest teraz dostępny na komputerach, tylko na urządzeniach mobilnych wcześniej), do zaoferowania tej opcji można użyć nowej sesji multimediów skipad opcji Obraz w obrazie.

Przycisk pominięcia reklamy w oknie obrazu w obrazie
„Pomiń reklamę” przycisk w oknie Obraz w obrazie

Aby udostępnić tę funkcję, przekaż funkcję za pomocą funkcji skipad podczas wywoływania setActionHandler() Aby je ukryć, przejdź przez null. Jak można przeczytać poniżej, 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ą wersję „Pomiń reklamę” użyj próbki i poinformuj nas, jak ta funkcja wymaga poprawy.

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

Autoodtwarzanie przyznane w przypadku aplikacji PWA na komputery

Teraz, gdy progresywne aplikacje internetowe są dostępne na wszystkich platformach komputerowych, rozszerzamy regułę obowiązującą w przypadku urządzeń mobilnych na komputer: autoodtwarzanie, dźwięk jest teraz dozwolony w przypadku zainstalowanych aplikacji PWA. Pamiętaj, że dotyczy to tylko stron w zakres pliku manifestu aplikacji internetowej.

Błąd Chromium