كيفية تخصيص إشعارات الوسائط

François Beaufort
François Beaufort
GitHub

تتيح واجهة برمجة التطبيقات لجلسات الوسائط للمواقع الإلكترونية إعلام المستخدمين بالوسائط التي يتم تشغيلها حاليًا في المتصفّح والتحكّم فيها بدون الرجوع إلى الصفحة التي تم تشغيلها منها. يمكن تخصيص تجربة المستخدم من خلال البيانات الوصفية في إشعارات الوسائط المخصّصة وأحداث الوسائط، مثل التشغيل والإيقاف المؤقت والبحث وتغيير المسار. تتوفّر هذه التخصيصات في سياقات مختلفة، بما في ذلك مراكز الوسائط على أجهزة الكمبيوتر المكتبي وإشعارات الوسائط على الأجهزة الجوّالة وحتى على الأجهزة القابلة للارتداء.

Browser Support

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

Source

لقطات شاشة لسياقات "جلسة الوسائط"
مركز الوسائط على الكمبيوتر، وإشعار الوسائط على الجهاز الجوّال، وجهاز قابل للارتداء

عندما يعرض موقع إلكتروني محتوًى صوتيًا أو فيديو، يتلقّى المستخدمون تلقائيًا إشعارات بالوسائط إما في لوحة الإشعارات على الأجهزة الجوّالة أو في "مركز الوسائط" على أجهزة الكمبيوتر. يبذل المتصفّح قصارى جهده لعرض المعلومات المناسبة باستخدام عنوان المستند وأكبر صورة رمزية يمكنه العثور عليها. تتيح لك Media Session 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";
});