Medienbenachrichtigungen anpassen

François Beaufort
François Beaufort
GitHub

Mit der Media Session API können Websites Nutzern mitteilen, was gerade in ihrem Browser wiedergegeben wird, und die Wiedergabe steuern, ohne zur Seite zurückkehren zu müssen, von der sie gestartet wurde. Die Nutzererfahrung kann durch Metadaten in benutzerdefinierten Medienbenachrichtigungen und Medienereignissen wie Wiedergabe, Pause, Suche und Titeländerung angepasst werden. Diese Anpassungen sind in verschiedenen Kontexten verfügbar, z. B. in Media Hubs auf dem Computer, in Medienbenachrichtigungen auf Mobilgeräten und sogar auf Wearables.

Browser Support

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

Source

Screenshots von Mediensitzungskontexten.
Media Hub auf dem Computer, Medienbenachrichtigung auf dem Mobilgerät und ein Wearable.

Wenn auf einer Website Audio oder Video wiedergegeben wird, erhalten Nutzer automatisch Medienbenachrichtigungen, entweder in der Benachrichtigungsleiste auf dem Mobilgerät oder im Media Hub auf dem Computer. Der Browser versucht, relevante Informationen anzuzeigen, indem er den Titel des Dokuments und das größte verfügbare Symbolbild verwendet. Mit der Media Session API können Sie die Medienbenachrichtigung mit umfangreicheren Metadaten anpassen, z. B. mit dem Titel, dem Namen des Künstlers, dem Namen des Albums und dem Cover.

Abbildung der Media Session-Schnittstellen.
Aufbau einer Medienbenachrichtigung auf einem Mobilgerät.

Im folgenden Beispiel wird gezeigt, wie Sie eine benutzerdefinierte Medienbenachrichtigung erstellen und auf grundlegende Medienaktionen wie „Wiedergabe“ und „Pause“ reagieren.

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

Weitere Informationen

Demo

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