Personnaliser les notifications multimédias

François Beaufort
François Beaufort
GitHub

L'API Media Session permet aux sites Web d'indiquer aux utilisateurs le contenu 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 les notifications multimédias personnalisées et d'événements multimédias tels que la lecture, la mise en pause, la recherche et le changement de titre. Ces personnalisations sont disponibles dans plusieurs contextes, y compris les hubs multimédias pour ordinateur, les notifications multimédias sur mobile et même sur les accessoires connectés.

Navigateurs pris en charge

  • 73
  • 79
  • 82
  • 15

Source

Captures d'écran des contextes de sessions multimédias.
Media Hub sur ordinateur, notifications multimédias sur mobile et accessoire connecté.

Lorsqu'un site Web lit du contenu audio ou vidéo, les utilisateurs reçoivent automatiquement les notifications multimédias dans la barre de notification sur mobile ou dans le hub multimédia sur ordinateur. Le navigateur affiche au mieux les informations appropriées en utilisant le titre du document et l'icône la plus grande 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 la pochette, comme illustré ci-dessous.

Illustration des interfaces de la 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 à des actions multimédias de base telles que lecture et 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";
});

Complément d'informations

Démonstration

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";
});