मीडिया सूचनाओं को पसंद के मुताबिक कैसे बनाएं

François Beaufort
François Beaufort
GitHub

मीडिया सेशन एपीआई वेबसाइटों को उपयोगकर्ताओं को यह बताने देता है कि उनके ब्राउज़र में फ़िलहाल क्या चल रहा है. साथ ही, वे इसे कंट्रोल करने के लिए, उस पेज पर वापस नहीं जा सकते जहां इसे लॉन्च किया गया था. उपयोगकर्ता अनुभव को कस्टम मीडिया सूचनाओं के मेटाडेटा की मदद से, पसंद के मुताबिक बनाया जा सकता है. इसके अलावा, मीडिया इवेंट जैसे कि चलाना, रोकना, खोजना, और डेटा बदलने पर नज़र रखने से जुड़े इवेंट की मदद से, उपयोगकर्ता अनुभव को अपनी पसंद के मुताबिक बनाया जा सकता है. ये कस्टमाइज़ेशन कई कॉन्टेक्स्ट में उपलब्ध हैं. जैसे, डेस्कटॉप मीडिया हब, मोबाइल पर मीडिया सूचनाएं, और पहने जाने वाले डिवाइसों पर भी.

ब्राउज़र सहायता

  • 73
  • 79
  • 82
  • 15

सोर्स

मीडिया सेशन से जुड़े कॉन्टेक्स्ट के स्क्रीनशॉट.
डेस्कटॉप पर मीडिया हब, मोबाइल पर मिलने वाली मीडिया सूचनाएं, और पहने जाने वाले डिवाइस.

जब किसी वेबसाइट पर ऑडियो या वीडियो चल रहा होता है, तब उपयोगकर्ताओं को मोबाइल पर सूचना ट्रे में या डेस्कटॉप पर मीडिया हब में अपने-आप मीडिया सूचनाएं मिलती हैं. ब्राउज़र, दस्तावेज़ के टाइटल और आइकॉन की सबसे बड़ी इमेज का इस्तेमाल करके सही जानकारी दिखाने की पूरी कोशिश करता है. 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";
});

इसके बारे में और पढ़ें

डेमो

एचटीएमएल

<!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%;
}

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