איך להתאים אישית התראות מדיה

François Beaufort
François Beaufort
GitHub

ה-MediaSession API מאפשר לאתרים לאפשר למשתמשים לדעת מה מופעל כרגע בדפדפן שלהם ולשלוט בו, בלי לחזור לדף שבו הוא הופעל. אפשר להתאים אישית את חוויית המשתמש בעזרת מטא-נתונים בהתראות מדיה מותאמות אישית, אירועי מדיה כמו הפעלה, השהיה, דילוג ומעקב אחר שינויים. ההתאמות האישיות האלה זמינות במספר הקשרים, כולל רכזות מדיה במחשב, התראות מדיה בנייד ואפילו במכשירים לבישים.

תמיכה בדפדפן

  • 73
  • 79
  • 82
  • 15

מקור

צילומי מסך של הקשרים של סשנים במדיה.
מרכז המדיה במחשב, התראות על מדיה בנייד ובמכשיר לביש.

כשמשתמשים מפעילים אודיו או וידאו באתר, המשתמשים מקבלים באופן אוטומטי התראות על מדיה במגש ההתראות בנייד, או במרכז המדיה במחשב. הדפדפן עושה כמיטב יכולתו כדי להציג מידע מתאים באמצעות כותרת המסמך ותמונת הסמל הגדולה ביותר שהוא יכול למצוא. ה-MediaSession API מאפשר לך להתאים אישית את הודעת המדיה באמצעות מטא-נתונים עשירים יותר של מדיה, כמו הכותרת, שם האומן, שם האלבום וגרפיקה כפי שמוצג בהמשך.

איור של הממשקים של סשן מדיה.
המבנה של התראה על מדיה בנייד.

הדוגמה הבאה מראה איך ליצור התראת מדיה מותאמת אישית ולהגיב לפעולות בסיסיות במדיה, כמו הפעלה והשהיה.

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

קריאה נוספת

הדגמה (דמו)

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