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

François Beaufort
François Beaufort
GitHub

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

التوافق مع المتصفح

  • 73
  • 79
  • 82
  • 15

المصدر

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

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

صورة توضيحية لواجهات جلسات تشغيل الوسائط
بنية إشعار الوسائط على الأجهزة الجوّالة

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

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