Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

François Beaufort

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

Browser Support

Source

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

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

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

डेमो

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