تسمح واجهة برمجة التطبيقات 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";
});
محتوى إضافي للقراءة
- مواصفات جلسات الوسائط في W3C
- تخصيص إشعارات الوسائط وعناصر التحكّم في التشغيل باستخدام واجهة برمجة التطبيقات Media Session API
- واجهة برمجة تطبيقات جلسة وسائط MDN
الخصائص الديموغرافية
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";
});