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.
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).
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
- W3C-Media Session-Spezifikation
- Medienbenachrichtigungen und Wiedergabesteuerung mit der Media Session API anpassen
- MDN Media Session API
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";
});