Medienbenachrichtigungen anpassen

François Beaufort
François Beaufort
GitHub

Mit der Media Session API können Websites Nutzern mitteilen, was gerade in ihrem Browser abgespielt wird, und diese steuern, ohne zu der Seite zurückzukehren, auf der sie gestartet wurde. Die Nutzererfahrung kann durch Metadaten in benutzerdefinierten Medienbenachrichtigungen und Medienereignissen wie Wiedergabe, Pause, Suchen und Titelwechsel angepasst werden. Diese Anpassungen sind in verschiedenen Kontexten verfügbar, z. B. in Media Hubs auf Computern, Medienbenachrichtigungen auf Mobilgeräten und sogar auf Wearables.

Unterstützte Browser

  • 73
  • 79
  • 82
  • 15

Quelle

Screenshots von Kontexten für Mediensitzungen.
Media Hub für Computer, Medienbenachrichtigungen auf Mobilgeräten und ein Wearable.

Wenn eine Website Audio- oder Videoinhalte wiedergibt, erhalten Nutzer automatisch Medienbenachrichtigungen entweder in der Benachrichtigungsleiste auf Mobilgeräten oder im Media Hub auf dem Computer. Der Browser versucht, die passenden Informationen anzuzeigen, indem er den Titel des Dokuments und das größte Symbolbild verwendet, das er finden kann. Mit der Media Session API können Sie die Medienbenachrichtigung mit komplexeren Medienmetadaten wie Titel, Künstlername, Albumname und Artwork anpassen (siehe unten).

Illustration der Mediensitzungs-Benutzeroberflächen
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 „Pausieren“ 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";
});