মিডিয়া সেশন API ওয়েবসাইটগুলিকে ব্যবহারকারীদের তাদের ব্রাউজারে বর্তমানে কী চলছে তা জানাতে এবং এটি চালু করা পৃষ্ঠায় ফিরে না গিয়ে এটি নিয়ন্ত্রণ করার অনুমতি দেয়৷ ব্যবহারকারীর অভিজ্ঞতা কাস্টম মিডিয়া বিজ্ঞপ্তিতে মেটাডেটার মাধ্যমে কাস্টমাইজ করা যেতে পারে, মিডিয়া ইভেন্ট যেমন প্লে করা, বিরতি দেওয়া, চাওয়া এবং ট্র্যাক পরিবর্তন করা। এই কাস্টমাইজেশনগুলি ডেস্কটপ মিডিয়া হাব, মোবাইলে মিডিয়া বিজ্ঞপ্তি এবং এমনকি পরিধানযোগ্য ডিভাইসেও সহ বিভিন্ন প্রসঙ্গে উপলব্ধ।
যখন একটি ওয়েবসাইট অডিও বা ভিডিও চালায়, ব্যবহারকারীরা স্বয়ংক্রিয়ভাবে মোবাইলের নোটিফিকেশন ট্রেতে বা ডেস্কটপে মিডিয়া হাবে মিডিয়া বিজ্ঞপ্তিগুলি পান৷ ব্রাউজারটি নথির শিরোনাম এবং এটি খুঁজে পেতে পারে এমন বৃহত্তম আইকন চিত্র ব্যবহার করে উপযুক্ত তথ্য দেখানোর জন্য যথাসাধ্য চেষ্টা করে৷ মিডিয়া সেশন 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 মিডিয়া সেশন স্পেসিফিকেশন
- মিডিয়া সেশন API এর সাথে মিডিয়া বিজ্ঞপ্তি এবং প্লেব্যাক নিয়ন্ত্রণগুলি কাস্টমাইজ করুন৷
- MDN মিডিয়া সেশন API
ডেমো
এইচটিএমএল
<!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";
});