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

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

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

Browser Support

  • کروم: ۷۳.
  • لبه: ۷۹.
  • فایرفاکس: ۸۲.
  • سافاری: ۱۵.

Source

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

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

مطالعه بیشتر

نسخه آزمایشی

اچ‌تی‌ام‌ال 

<!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>

سی‌اس‌اس 


        :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%;
}

جی‌اس 


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