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