Personnaliser les notifications multimédias

François Beaufort
François Beaufort
GitHub

L'API Media Session permet aux sites Web d'informer les utilisateurs de ce qui est en cours de lecture dans leur navigateur et de le contrôler sans revenir à la page qui l'a lancé. L'expérience utilisateur peut être personnalisée à l'aide de métadonnées dans des notifications multimédias personnalisées, d'événements multimédias tels que la lecture, la mise en pause, la recherche et le changement de piste. Ces personnalisations sont disponibles dans plusieurs contextes, y compris les hubs multimédias sur ordinateur, les notifications multimédias sur mobile et même sur les accessoires connectés.

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 82.
  • Safari: 15.

Source

Captures d'écran des contextes de session multimédia.
Hub multimédia sur ordinateur, notification multimédia sur mobile et accessoire connecté.

Lorsqu'un site Web lit de l'audio ou de la vidéo, les utilisateurs reçoivent automatiquement des notifications multimédias dans le panneau de notifications sur mobile ou dans le hub multimédia sur ordinateur. Le navigateur fait de son mieux pour afficher les informations appropriées en utilisant le titre du document et la plus grande image d'icône qu'il peut trouver. L'API Media Session vous permet de personnaliser la notification multimédia avec des métadonnées multimédias plus riches, telles que le titre, le nom de l'artiste, le nom de l'album et l'illustration, comme indiqué ci-dessous.

Illustration des interfaces de session multimédia.
Anatomie d'une notification multimédia sur mobile.

L'exemple ci-dessous vous montre comment créer une notification multimédia personnalisée et répondre aux actions multimédias de base telles que la lecture et la mise en pause.

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

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" },
    { src: "https://via.placeholder.com/128", sizes: "128x128" },
    { src: "https://via.placeholder.com/256", sizes: "256x256" },
    { src: "https://via.placeholder.com/512", sizes: "512x512" },
  ],
});

navigator.mediaSession.setActionHandler("play", async () => {
  // Resume playback
  try {
    await video.play();
  } catch (err) {
    console.error(err.name, err.message);
  }
});

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

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

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

Documentation complémentaire

Démo

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>"
    />
    <title>How to customize media notifications</title>
  </head>
  <body>
    <h1>How to customize media notifications</h1>
    <video controls playsinline src="https://storage.googleapis.com/media-session/caminandes/short.mp4"></video>
    <p>Credits: Media files are © copyright Blender Foundation | <a href="https://www.blender.org">www.blender.org</a>.</p>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}
video {
  display: block;
  margin-top: 10px;
  max-width: 100%;
}

JS


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

navigator.mediaSession.metadata = new MediaMetadata({
  title: "Caminandes 2: Gran Dillama - Blender Animated Short",
  artist: "Blender Foundation",
  artwork: [
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-96.png",  sizes: "96x96" },
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-128.png", sizes: "128x128" },
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-256.png", sizes: "256x256" },
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-512.png", sizes: "512x512" },
  ],
});

navigator.mediaSession.setActionHandler("play", async () => {
  // Resume playback
  try {
    await video.play();
  } catch (err) {
    console.error(err.name, err.message);
  }
});

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

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

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