মিডিয়া বিজ্ঞপ্তি কাস্টমাইজ কিভাবে

ফ্রাঁসোয়া বোফোর্ট
François Beaufort
GitHub

মিডিয়া সেশন এপিআই ওয়েবসাইটগুলোকে ব্যবহারকারীদের জানাতে দেয় যে তাদের ব্রাউজারে বর্তমানে কী চলছে এবং যে পৃষ্ঠা থেকে এটি চালু করা হয়েছিল সেখানে ফিরে না গিয়েই তা নিয়ন্ত্রণ করার সুযোগ দেয়। কাস্টম মিডিয়া নোটিফিকেশনে মেটাডেটা এবং প্লেয়িং, পজিং, সিক ও ট্র্যাক পরিবর্তনের মতো মিডিয়া ইভেন্টের মাধ্যমে ব্যবহারকারীর অভিজ্ঞতা কাস্টমাইজ করা যায়। এই কাস্টমাইজেশনগুলো ডেস্কটপ মিডিয়া হাব, মোবাইলের মিডিয়া নোটিফিকেশন এবং এমনকি পরিধানযোগ্য ডিভাইসসহ বিভিন্ন ক্ষেত্রে উপলব্ধ।

Browser Support

  • ক্রোম: ৭৩।
  • প্রান্ত: ৭৯।
  • ফায়ারফক্স: ৮২।
  • সাফারি: ১৫।

Source

মিডিয়া সেশন কনটেক্সটগুলোর স্ক্রিনশট।
ডেস্কটপে মিডিয়া হাব, মোবাইলে মিডিয়া নোটিফিকেশন এবং একটি পরিধানযোগ্য ডিভাইস।

যখন কোনো ওয়েবসাইটে অডিও বা ভিডিও চলে, তখন ব্যবহারকারীরা স্বয়ংক্রিয়ভাবে মোবাইলের নোটিফিকেশন ট্রে-তে অথবা ডেস্কটপের মিডিয়া হাবে মিডিয়া নোটিফিকেশন পেয়ে যান। ব্রাউজারটি ডকুমেন্টের শিরোনাম এবং তার খুঁজে পাওয়া সবচেয়ে বড় আইকন ইমেজ ব্যবহার করে যথাযথ তথ্য দেখানোর জন্য যথাসাধ্য চেষ্টা করে। মিডিয়া সেশন এপিআই আপনাকে শিরোনাম, শিল্পীর নাম, অ্যালবামের নাম এবং আর্টওয়ার্কের মতো কিছু আরও সমৃদ্ধ মিডিয়া মেটাডেটা দিয়ে মিডিয়া নোটিফিকেশনটি কাস্টমাইজ করার সুযোগ দেয়, যা নিচে দেখানো হয়েছে।

মিডিয়া সেশন ইন্টারফেসের চিত্র।
মোবাইলে মিডিয়া নোটিফিকেশনের গঠন।

নিচের উদাহরণটিতে দেখানো হয়েছে কীভাবে একটি কাস্টম মিডিয়া নোটিফিকেশন তৈরি করতে হয় এবং প্লে ও পজের মতো সাধারণ মিডিয়া অ্যাকশনগুলোতে সাড়া দিতে হয়।

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