نحوه سفارشی سازی اعلان های رسانه

فرانسوا بوفور
François Beaufort
GitHub

Media Session API به وب‌سایت‌ها اجازه می‌دهد تا به کاربران اطلاع دهند که در حال حاضر چه چیزی در مرورگرشان پخش می‌شود و بدون بازگشت به صفحه‌ای که آن را راه‌اندازی کرده است، آن را کنترل کنند. تجربه کاربر را می‌توان از طریق ابرداده در اعلان‌های رسانه سفارشی، رویدادهای رسانه‌ای مانند پخش، مکث، جستجو و تغییر مسیر سفارشی کرد. این سفارشی‌سازی‌ها در زمینه‌های مختلفی از جمله مرکز رسانه دسک‌تاپ، اعلان‌های رسانه در تلفن همراه و حتی در دستگاه‌های پوشیدنی در دسترس هستند.

پشتیبانی مرورگر

  • 73
  • 79
  • 82
  • 15

منبع

اسکرین شات از زمینه های جلسه رسانه.
هاب رسانه روی دسکتاپ، اعلان رسانه در تلفن همراه، و یک دستگاه پوشیدنی.

هنگامی که یک وب‌سایت در حال پخش صدا یا تصویر است، کاربران به‌طور خودکار اعلان‌های رسانه را در سینی اعلان‌ها در تلفن همراه یا مرکز رسانه روی دسک‌تاپ دریافت می‌کنند. مرورگر تمام تلاش خود را می کند تا با استفاده از عنوان سند و بزرگترین تصویر نمادی که می تواند پیدا کند، اطلاعات مناسب را نشان دهد. Media Session 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";
});