Dostosuj powiadomienia o multimediach i elementy sterujące odtwarzaniem za pomocą interfejsu Media Session API

Jak przeprowadzić integrację ze sprzętowymi kluczami multimedialnymi i dostosować powiadomienia o multimediach.

François Beaufort

Aby użytkownicy wiedzieli, co jest obecnie odtwarzane w przeglądarce, i nimi sterować nie wracając do strony, na której została uruchomiona, interfejs Media Session API został przedstawiliśmy. Pozwala twórcom stron internetowych na dostosowywanie tej funkcji metadanych w niestandardowych powiadomieniach o multimediach, zdarzeniach multimedialnych, takich jak odtwarzanie, wstrzymywanie przewijanie, śledzenie zmiany i zdarzenia rozmów wideo, np. wyciszenie/wyłączenie wyciszenia mikrofon, włączyć/wyłączyć kamerę i się rozłączyć. Te dostosowania są dostępne w wielu kontekstach, w tym w centrach multimedialnych na komputerach, na urządzeniach mobilnych, a nawet na urządzeniach do noszenia. Opisuję te dostosowania w ten artykuł.

Informacje o interfejsie Media Session API

Interfejs Media Session API ma kilka korzyści i możliwości:

• Sprzętowe klawisze multimedialne są obsługiwane.
• Powiadomienia o multimediach są dostosowywane na urządzeniu mobilnym, komputerze i sparowanym urządzeniu do noszenia.
• Centrum multimediów jest dostępne na komputerach.
• Opcje sterowania multimediami na ekranie blokady są dostępne na urządzeniach z ChromeOS i urządzeniach mobilnych.
• Elementy sterujące oknem obrazu w obrazie są dostępne do odtwarzania dźwięku, rozmów wideo i prezentacji slajdów.
• Na urządzeniach mobilnych dostępna jest integracja z Asystentem.

Oto kilka przykładów ilustrujących te kwestie.

Przykład 1: jeśli użytkownik kliknie „następna ścieżka” klawisz multimedialny na klawiaturze programiści stron internetowych mogą obsłużyć to działanie użytkownika niezależnie od tego, czy przeglądarka działa na pierwszym planie lub jej tło.

Przykład 2. Jeśli użytkownicy słuchają podcastu w internecie na urządzeniu ekran jest zablokowany, nadal może nacisnąć „przewinięcie do tyłu” ikona kłódki elementy sterujące odtwarzaniem multimediów na ekranie, dzięki czemu programista stron internetowych przesunął czas odtwarzania o kilka wstecz sek.

Przykład 3. Jeśli użytkownicy mają karty odtwarzające dźwięk, mogą łatwo zatrzymać odtwarzanie z centrum multimediów na komputerze, aby programiści stron internetowych mieli szansę wyczyścić ich stan.

Przykład 4. Jeśli użytkownicy biorą udział w rozmowie wideo, mogą nacisnąć przełącznik mikrofon” w oknie obrazu w obrazie, aby uniemożliwić stronie odbierania danych mikrofonu.

Można to zrobić za pomocą 2 różnych interfejsów: MediaSession i interfejs MediaMetadata. Pierwsza pozwala użytkownikom kontrolować gra. Po drugie, możesz poinformować usługę MediaSession, co ma kontrolować.

Na ilustracji poniżej przedstawiono związek tych interfejsów z konkretnymi opcje sterowania multimediami, w tym przypadku powiadomienia o multimediach na urządzeniu mobilnym.

Informuj użytkowników o utworach

Gdy strona odtwarza dźwięk lub obraz, użytkownicy automatycznie otrzymują multimedia powiadomienia w obszarze powiadomień na komórce lub w centrum multimediów na komputerze. Przeglądarka stara się wyświetlać odpowiednie informacje za pomocą tytuł dokumentu i największy obraz ikony, jaki może znaleźć. Sesja multimedialna API, można dostosować powiadomienie o multimediach takie jak tytuł, nazwa wykonawcy, nazwa albumu i grafika, jak widać poniżej.

Chrome żąda „pełnego” aby pokazywać powiadomienia o multimediach tylko wtedy, gdy czas trwania multimediów to co najmniej 5 sekund. Dzięki temu przypadkowe dźwięki na przykład dźwięki nie powodują włączenia powiadomień.

// After media (video or audio) starts playing
await document.querySelector("video").play();

if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    artwork: [
      { src: 'https://via.placeholder.com/96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/192', sizes: '192x192', type: 'image/png' },
      { src: 'https://via.placeholder.com/256', sizes: '256x256', type: 'image/png' },
      { src: 'https://via.placeholder.com/384', sizes: '384x384', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  });

  // TODO: Update playback state.
}

Po zakończeniu odtwarzania nie trzeba „zwalniać” filmu. podczas sesji multimedialnej zniknie automatycznie. Pamiętaj, że: navigator.mediaSession.metadata zostanie użyte po rozpoczęciu następnego odtwarzania . Dlatego trzeba je aktualizować, gdy źródło odtwarzania multimediów aby w powiadomieniach dla mediów pojawiały się istotne informacje.

Pamiętaj o kilku kwestiach dotyczących metadanych multimediów.

• Tablica grafik powiadomień obsługuje adresy URL obiektów blob i adresy URL danych.
• Jeśli nie zdefiniowano grafiki i widoczny jest obraz ikony (określony za pomocą parametru <link rel=icon>) w odpowiednim rozmiarze, będzie on używany w powiadomieniach o multimediach.
• Rozmiar docelowy grafiki powiadomienia w Chrome na Androida to 512x512. Dla: Tańsze urządzenia to 256x256.
• Atrybut title elementu HTML multimediów jest używany w sekcji „Co jest grane”. Widżet systemu macOS.
• Jeśli zasób multimedialny jest umieszczony (na przykład w elemencie iframe), interfejs Media Session API Informacje muszą pochodzić z kontekstu osadzonego. Zobacz fragment poniżej.

<iframe id="iframe">
  <video>...</video>
</iframe>
<script>
  iframe.contentWindow.navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    ...
  });
</script>

Do metadanych multimediów możesz też dodać informacje o poszczególnych rozdziałach, takie jak tytuł, sygnatura czasowa i obraz zrzutu ekranu. Umożliwia to użytkownikom poruszanie się po multimediach.

navigator.mediaSession.metadata = new MediaMetadata({
  // title, artist, album, artwork, ...
  chapterInfo: [{
    title: 'Chapter 1',
    startTime: 0,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }, {
    title: 'Chapter 2',
    startTime: 42,
    artwork: [
      { src: 'https://via.placeholder.com/128', sizes: '128x128', type: 'image/png' },
      { src: 'https://via.placeholder.com/512', sizes: '512x512', type: 'image/png' },
    ]
  }]
});

.

Daj użytkownikom kontrolę nad tym, co jest odtwarzane

Działanie sesji multimediów to działanie (np. „odtworzenie” lub „wstrzymanie”), które strona internetowa może obsługiwaną przez użytkowników wchodzących w interakcje z odtwarzanymi multimediami. Działania to działają podobnie jak zdarzenia. Podobnie jak zdarzenia, działania są są implementowane przez ustawienie modułów obsługi dla odpowiedniego obiektu, instancji MediaSession. Niektóre działania są wyzwalane, gdy użytkownik naciśnie z zestawu słuchawkowego, z innego urządzenia zdalnego, klawiatury lub z powiadomienie o multimediach.

Niektóre działania w ramach sesji multimedialnych mogą nie być obsługiwane, dlatego zalecamy używaj blokady try…catch.

const actionHandlers = [
  ['play',          () => { /* ... */ }],
  ['pause',         () => { /* ... */ }],
  ['previoustrack', () => { /* ... */ }],
  ['nexttrack',     () => { /* ... */ }],
  ['stop',          () => { /* ... */ }],
  ['seekbackward',  (details) => { /* ... */ }],
  ['seekforward',   (details) => { /* ... */ }],
  ['seekto',        (details) => { /* ... */ }],
  /* Video conferencing actions */
  ['togglemicrophone', () => { /* ... */ }],
  ['togglecamera',     () => { /* ... */ }],
  ['hangup',           () => { /* ... */ }],
  /* Presenting slides actions */
  ['previousslide', () => { /* ... */ }],
  ['nextslide',     () => { /* ... */ }],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}

Aby wyłączyć moduł obsługi działań w sesji multimediów, wystarczy ustawić go na null.

try {
  // Unset the "nexttrack" action handler at the end of a playlist.
  navigator.mediaSession.setActionHandler('nexttrack', null);
} catch (error) {
  console.log(`The media session action "nexttrack" is not supported yet.`);
}

Po skonfigurowaniu moduły obsługi działań w sesji multimediów będą zachowywane podczas odtwarzania multimediów. Jest to podobne do wzorca detektora zdarzeń, z tą różnicą, że obsługa zdarzenia oznacza, że przeglądarka przestaje działać domyślnie i wykorzystuje ją jako sygnał, że witryna obsługuje działanie związane z multimediami. Dlatego funkcje sterowania multimediami nie pojawi się, dopóki nie zostanie ustawiony odpowiedni moduł obsługi działań.

Odtwarzanie / wstrzymywanie

Działanie "play" oznacza, że użytkownik chce wznowić odtwarzanie multimediów. a "pause" oznacza chęć jego tymczasowego wstrzymania.

Element „Odtwórz/wstrzymaj” jest zawsze widoczna w powiadomieniu o multimediach, a powiązane z nią zdarzenia multimedialne są obsługiwane przez przeglądarkę automatycznie. Aby zastąpić ich ustawienia domyślne zachowanie, obsługa funkcji „odtwarzanie”. i „wstrzymaj” działania związane z multimediami, jak pokazano poniżej.

Przeglądarka może uznać, że witryna nie odtwarza multimediów podczas przewijania lub w czasie rzeczywistym. W tym przypadku zastąp to działanie za pomocą ustawienia Z: navigator.mediaSession.playbackState do: "playing" lub "paused", aby się upewnić interfejs strony jest zsynchronizowany z elementami sterującymi powiadomieniami o multimediach.

const video = document.querySelector('video');

navigator.mediaSession.setActionHandler('play', async () => {
  // Resume playback
  await video.play();
});

navigator.mediaSession.setActionHandler('pause', () => {
  // Pause active playback
  video.pause();
});

video.addEventListener('play', () => {
  navigator.mediaSession.playbackState = 'playing';
});

video.addEventListener('pause', () => {
  navigator.mediaSession.playbackState = 'paused';
});

Poprzedni utwór

Działanie "previoustrack" wskazuje, że użytkownik chce uruchomić odtwarzanie multimediów od początku, jeśli przy odtwarzaniu lub przejść do poprzedniego elementu playlisty, jeśli odtwarzanie ma pojęcie playlisty.

navigator.mediaSession.setActionHandler('previoustrack', () => {
  // Play previous track.
});

Następny utwór

Akcja "nexttrack" wskazuje, że użytkownik chce przenieść odtwarzanie multimediów do: następny element playlisty, jeśli jej nazwa dotyczy playlisty.

navigator.mediaSession.setActionHandler('nexttrack', () => {
  // Play next track.
});

Zatrzymaj

Działanie "stop" oznacza, że użytkownik chce zatrzymać odtwarzanie multimediów i w razie potrzeby wyczyścić stan.

navigator.mediaSession.setActionHandler('stop', () => {
  // Stop playback and clear state if appropriate.
});

Przewijanie do tyłu i do przodu

Czynność "seekbackward" oznacza, że użytkownik chce przenieść multimedia czas odtwarzania do tyłu o krótki okres, podczas gdy "seekforward" wskazuje, że użytkownik chce odtworzyć film aby przesunąć czas odtwarzania multimediów o krótki czas do przodu. W obu przypadkach czyli „kilka sekund”.

Wartość seekOffset podana w module obsługi działania to czas w sekundach wydłużać czas odtwarzania multimediów. Jeśli nie zostanie podany (np. undefined), to wybierz odpowiedni czas (np. 10–30 sekund).

const video = document.querySelector('video');
const defaultSkipTime = 10; /* Time to skip in seconds by default */

navigator.mediaSession.setActionHandler('seekbackward', (details) => {
  const skipTime = details.seekOffset || defaultSkipTime;
  video.currentTime = Math.max(video.currentTime - skipTime, 0);
  // TODO: Update playback state.
});

navigator.mediaSession.setActionHandler('seekforward', (details) => {
  const skipTime = details.seekOffset || defaultSkipTime;
  video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
  // TODO: Update playback state.
});

Przewijanie do konkretnego momentu

Czynność "seekto" oznacza, że użytkownik chce przenieść odtwarzanie multimediów w określonym czasie.

Wartość seekTime podana w module obsługi działania to czas w sekundach o zmianę czasu odtwarzania.

Wartość logiczna fastSeek podana w module obsługi działań ma wartość Prawda, jeśli działanie to jest wywoływane wielokrotnie w ramach sekwencji i nie jest to ostatnie wywołanie w tej sekwencji.

const video = document.querySelector('video');

navigator.mediaSession.setActionHandler('seekto', (details) => {
  if (details.fastSeek && 'fastSeek' in video) {
    // Only use fast seek if supported.
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
  // TODO: Update playback state.
});

Ustaw pozycję odtwarzania

Dokładne wyświetlanie pozycji odtwarzania multimediów w powiadomieniu jest niezwykle proste. jak ustawić stan pozycji w odpowiednim momencie, jak pokazano poniżej. jest połączeniem szybkości odtwarzania, czasu trwania i bieżącej godzinie.

Czas trwania musi być liczbą dodatnią. Pozycja musi być dodatnia i mniej niż czas trwania. Szybkość odtwarzania musi być większa niż 0.

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// When video starts playing, update duration.
await video.play();
updatePositionState();

// When user wants to seek backward, update position.
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
  /* ... */
  updatePositionState();
});

// When user wants to seek forward, update position.
navigator.mediaSession.setActionHandler('seekforward', (details) => {
  /* ... */
  updatePositionState();
});

// When user wants to seek to a specific time, update position.
navigator.mediaSession.setActionHandler('seekto', (details) => {
  /* ... */
  updatePositionState();
});

// When video playback rate changes, update position state.
video.addEventListener('ratechange', (event) => {
  updatePositionState();
});

Resetowanie stanu pozycji jest bardzo proste. Wystarczy ustawić wartość null.

// Reset position state when media is reset.
navigator.mediaSession.setPositionState(null);

Działania dotyczące rozmów wideo

Gdy użytkownik umieści rozmowę wideo w oknie obrazu w obrazie, przeglądarka może wyświetlać elementy sterujące mikrofonem i kamerą oraz rozłączeniem się. Gdy użytkownik je kliknie, witryna wyświetli je na ekranie czynności dotyczące rozmowy wideo poniżej. Odpowiedni przykład znajdziesz tutaj.

Włącz lub wyłącz mikrofon

Działanie "togglemicrophone" wskazuje, że użytkownik chce wyciszyć lub wyłączyć wyciszenie. mikrofon. Metoda setMicrophoneActive(isActive) informuje przeglądarkę czy witryna uznaje obecnie mikrofon za aktywny.

let isMicrophoneActive = false;

navigator.mediaSession.setActionHandler('togglemicrophone', () => {
  if (isMicrophoneActive) {
    // Mute the microphone.
  } else {
    // Unmute the microphone.
  }
  isMicrophoneActive = !isMicrophoneActive;
  navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
});

Przełącz kamerę

Działanie "togglecamera" wskazuje, że użytkownik chce włączyć włącz lub wyłącz kamerę. Metoda setCameraActive(isActive) wskazuje, czy uznaje witrynę za aktywną.

let isCameraActive = false;

navigator.mediaSession.setActionHandler('togglecamera', () => {
  if (isCameraActive) {
    // Disable the camera.
  } else {
    // Enable the camera.
  }
  isCameraActive = !isCameraActive;
  navigator.mediaSession.setCameraActive(isCameraActive);
});

rozłączyć połączenie,

Działanie "hangup" wskazuje, że użytkownik chce zakończyć połączenie.

navigator.mediaSession.setActionHandler('hangup', () => {
  // End the call.
});

Działania związane z prezentacją

Umieszczenie slajdów w oknie obrazu w obrazie przeglądarka może wyświetlać elementy sterujące nawigacją po slajdach. Gdy użytkownik Gdy ją kliknie, witryna będzie je obsługiwać za pomocą interfejsu Media Session API. Dla zobacz Przykład prezentacji.

Poprzedni slajd

Działanie "previousslide" wskazuje, że użytkownik chce wrócić do sekcji do poprzedniego slajdu podczas prezentacji.

navigator.mediaSession.setActionHandler('previousslide', () => {
  // Show previous slide.
});

Następny slajd

Działanie "nextslide" wskazuje, że użytkownik chce przejść do następnego slajdu. podczas prezentacji slajdów.

navigator.mediaSession.setActionHandler('nextslide', () => {
  // Show next slide.
});

Przykłady

Zapoznaj się z przykładami sesji medialnej, na których znajdują się: Blender Foundation i Dzieła Jana Morgensterna.

Zasoby

• Specyfikacja sesji multimedialnej: wicg.github.io/mediasession
• Problemy ze specyfikacją: github.com/WICG/mediasession/issues
• Błędy Chrome: crbug.com