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

François Beaufort
François Beaufort
GitHub

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

Browser Support

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

Source

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

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

איור של ממשקי Media Session.
ממה מורכבת התראה על מדיה בנייד.

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

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