आप वेब पर सबसे अच्छा मोबाइल मीडिया अनुभव कैसे तैयार करते हैं? आसान! यह सब उपयोगकर्ता के जुड़ाव और वेब पर मीडिया को आपकी ओर से दिए जाने वाले महत्व पर निर्भर करता है पेज. मुझे लगता है कि हम सभी इस बात से सहमत हैं कि अगर कोई दर्शक YouTube पर वीडियो देखना चाहता है, उपयोगकर्ता का अनुभव आकर्षक और पुनः दिलचस्प होना चाहिए.
इस लेख में, मैंने आपको बताया है कि अपने मीडिया को धीरे-धीरे कैसे बेहतर बनाया जाए ढेर सारे Web API की बदौलत, हम इन्हें बेहतर बना सकते हैं. यह हम गेम को मोबाइल प्लेयर पर गेम खेलने जैसा आसान बनाने के लिए, कंट्रोल, फ़ुलस्क्रीन, और बैकग्राउंड प्लेबैक की सुविधा है. सैंपल को अभी आज़माएं और यहां कोड देखें हमारा GitHub रिपॉज़िटरी.
कस्टम कंट्रोल
जैसा कि आपको दिख रहा है कि हम अपने मीडिया प्लेयर के लिए, जिस एचटीएमएल लेआउट का इस्तेमाल करेंगे वह
बहुत आसान है: <div> रूट एलिमेंट में एक <video> मीडिया एलिमेंट होता है और एक
वीडियो के कंट्रोल के लिए खास तौर पर बनाया गया <div> चाइल्ड एलिमेंट.
वीडियो के कुछ कंट्रोल बाद में दिए जाएंगे. जैसे: चलाएं/रोकें बटन, फ़ुलस्क्रीन पीछे और आगे जाने वाले बटन, और मौजूदा समय के लिए कुछ एलिमेंट, अवधि और समय को ट्रैक करने की सुविधा मिलती है.
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls"></div>
</div>
वीडियो का मेटाडेटा पढ़ें
सबसे पहले, वीडियो को सेट करने के लिए मेटाडेटा के लोड होने का इंतज़ार करते हैं
अवधि, मौजूदा समय, और प्रोग्रेस बार शुरू करें. ध्यान दें कि
secondsToTimeCode() फ़ंक्शन एक कस्टम यूटिलिटी फ़ंक्शन है जो मैंने लिखा है
यह कुछ सेकंड को "hh:mm:ss" वाली स्ट्रिंग में बदलता है फ़ॉर्मैट जो बेहतर है
वह भी सही है.
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</strong>
</div>
</div>
video.addEventListener('loadedmetadata', function () {
videoDuration.textContent = secondsToTimeCode(video.duration);
videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
videoProgressBar.style.transform = `scaleX(${
video.currentTime / video.duration
})`;
});
वीडियो चलाएं/रोकें
वीडियो मेटाडेटा लोड हो जाने के बाद, आइए अपना पहला बटन जोड़ें, जिससे
video.play() और video.pause() के साथ वीडियो चलाएं और रोकें, यह इस पर निर्भर करता है:
वीडियो चलाने की स्थिति.
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<strong><button id="playPauseButton"></button></strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</div>
</div>
playPauseButton.addEventListener('click', function (event) {
event.stopPropagation();
if (video.paused) {
video.play();
} else {
video.pause();
}
});
click इवेंट लिसनर में अपने वीडियो कंट्रोल में बदलाव करने के बजाय, हम इनका इस्तेमाल करते हैं
play और pause वीडियो इवेंट. कंट्रोल इवेंट के आधार पर काम करने में मदद मिलती है
(जैसा कि हम बाद में Media Session API के साथ देखेंगे) और
अगर प्लेबैक में ब्राउज़र दखल देता है, तो हम अपने कंट्रोल को सिंक में रखते हैं.
जब वीडियो चलना शुरू होता है, तो हम
बटन की स्थिति "रोकें" के तौर पर सेट करें और वीडियो कंट्रोल छिपाएं. जब वीडियो रुक जाता है, तो हम
बटन की स्थिति को बदलकर "चलाएं" करें वीडियो के कंट्रोल दिखाए जा सकते हैं.
video.addEventListener('play', function () {
playPauseButton.classList.add('playing');
});
video.addEventListener('pause', function () {
playPauseButton.classList.remove('playing');
});
जब वीडियो currentTime एट्रिब्यूट से दिखाया गया समय
timeupdate वीडियो इवेंट, हम अपने कस्टम कंट्रोल भी अपडेट करते हैं, अगर वे
दृश्य.
video.addEventListener('timeupdate', function () {
if (videoControls.classList.contains('visible')) {
videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
videoProgressBar.style.transform = `scaleX(${
video.currentTime / video.duration
})`;
}
});
वीडियो खत्म होने पर, हम बटन की स्थिति को बदलकर "चलाएं" करते हैं, वीडियो सेट करते हैं
currentTime को 0 पर वापस करें और अभी के लिए वीडियो कंट्रोल दिखाएं. ध्यान दें कि हम
साथ ही, अगर उपयोगकर्ता ने किसी और वीडियो को अपने-आप लोड होने की सुविधा चालू की है,
एक तरह का "AutoPlay" सुविधा.
video.addEventListener('ended', function () {
playPauseButton.classList.remove('playing');
video.currentTime = 0;
});
पीछे और आगे जाएं
आइए जारी रखें और "पीछे जाएं" जोड़ें और "आगे बढ़ें" ताकि उपयोगकर्ता कुछ कॉन्टेंट को आसानी से स्किप कर सकते हैं.
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<button id="playPauseButton"></button>
<strong
><button id="seekForwardButton"></button>
<button id="seekBackwardButton"></button
></strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</div>
</div>
var skipTime = 10; // Time to skip in seconds
seekForwardButton.addEventListener('click', function (event) {
event.stopPropagation();
video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
});
seekBackwardButton.addEventListener('click', function (event) {
event.stopPropagation();
video.currentTime = Math.max(video.currentTime - skipTime, 0);
});
पहले की तरह, अब भी click इवेंट लिसनर में वीडियो स्टाइल में बदलाव नहीं किया जा सकता
इन बटनों में से, हम सक्रिय seeking और seeked वीडियो इवेंट का इस्तेमाल इन कामों के लिए करेंगे
वीडियो की चमक को कम या ज़्यादा करना. मेरी पसंद के मुताबिक seeking सीएसएस क्लास, filter: brightness(0); की तरह आसान है.
video.addEventListener('seeking', function () {
video.classList.add('seeking');
});
video.addEventListener('seeked', function () {
video.classList.remove('seeking');
});
हमने अब तक जो भी बनाया है उसकी जानकारी यहां दी गई है. अगले सेक्शन में, हम फ़ुलस्क्रीन बटन पर क्लिक करें.
फ़ुलस्क्रीन
यहां हम कई वेब एपीआई का फ़ायदा लेने जा रहे हैं, ताकि साथ ही, बिना किसी रुकावट के फ़ुलस्क्रीन भी की जा सकती हैं. इसे इस्तेमाल करने के बारे में जानने के लिए, यहां जाएं: सैंपल.
बेशक, आपको उन सभी का इस्तेमाल करने की ज़रूरत नहीं है. बस वे टूल चुनें जो आपके लिए सही हैं पसंद करें और उन्हें एक साथ जोड़कर, अपना कस्टम फ़्लो बनाएं.
फ़ुलस्क्रीन मोड अपने-आप चालू होने से रोकें
iOS पर, मीडिया होने पर video एलिमेंट अपने-आप फ़ुलस्क्रीन मोड में चला जाता है
प्लेबैक शुरू हो जाता है. हमारी कोशिश रहती है कि हम अपने समाचार संगठन के लिए,
सभी मोबाइल ब्राउज़र पर मीडिया देखने का अनुभव मिलता है, तो मेरा सुझाव है कि आप playsinline को सेट करें
video एलिमेंट की विशेषता का इस्तेमाल करें, ताकि इसे iPhone पर इनलाइन चलाया जा सके और नहीं
प्लेबैक शुरू होने पर फ़ुलस्क्रीन मोड में जा सकते हैं. ध्यान दें कि इससे कोई खराब असर नहीं पड़ता
ब्राउज़र पर लोड होता है.
<div id="videoContainer"></div>
<video id="video" src="file.mp4"></video><strong>playsinline</strong></video>
<div id="videoControls">...</div>
</div>
बटन क्लिक करने पर फ़ुलस्क्रीन टॉगल करें
हम फ़ुलस्क्रीन को अपने-आप चालू करने से रोक देते हैं, इसलिए हमें ख़ुद को
Fullscreen API की मदद से, वीडियो के लिए फ़ुलस्क्रीन मोड. जब उपयोगकर्ता
"फ़ुलस्क्रीन बटन" पर क्लिक करता है, ऐसे में फ़ुल स्क्रीन मोड से बाहर आ जाता है
document.exitFullscreen(), अगर फ़िलहाल फ़ुलस्क्रीन मोड का इस्तेमाल किया जा रहा है
दस्तावेज़. अगर ऐसा नहीं है, तो इस तरीके की मदद से वीडियो कंटेनर पर फ़ुलस्क्रीन मोड का अनुरोध करें
उपलब्ध होने पर requestFullscreen() या webkitEnterFullscreen() पर फ़ॉलबैक
वीडियो एलिमेंट को सिर्फ़ iOS पर.
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<button id="playPauseButton"></button>
<button id="seekForwardButton"></button>
<button id="seekBackwardButton"></button>
<strong><button id="fullscreenButton"></button></strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</div>
</div>
fullscreenButton.addEventListener('click', function (event) {
event.stopPropagation();
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
requestFullscreenVideo();
}
});
function requestFullscreenVideo() {
if (videoContainer.requestFullscreen) {
videoContainer.requestFullscreen();
} else {
video.webkitEnterFullscreen();
}
}
document.addEventListener('fullscreenchange', function () {
fullscreenButton.classList.toggle('active', document.fullscreenElement);
});
स्क्रीन की ओरिएंटेशन बदलने पर फ़ुलस्क्रीन टॉगल करें
जब उपयोगकर्ता लैंडस्केप मोड में डिवाइस घुमाता है, तो आइए इस बारे में स्मार्ट बनें और इमर्सिव अनुभव बनाने के लिए, फ़ुलस्क्रीन मोड का अपने-आप अनुरोध किया जाता है. इसके लिए, हमें ऐसे स्क्रीन ओरिएंटेशन एपीआई की ज़रूरत होगी जो फ़िलहाल काम नहीं करता वह उस समय भी कुछ ब्राउज़र में प्रीफ़िक्स लगा हो सकता है. इस तरह, यह होगा हमारा पहला प्रोग्रेसिव एन्हैंसमेंट.
यह कैसे काम करता है? जैसे ही हमें स्क्रीन ओरिएंटेशन में बदलाव का पता चलता है, हम अगर ब्राउज़र विंडो लैंडस्केप मोड में है, तो फ़ुलस्क्रीन का अनुरोध करें (यानी, चौड़ाई इसकी ऊंचाई से ज़्यादा है). अगर ऐसा नहीं है, तो फ़ुलस्क्रीन से बाहर निकलें. बस इतना ही।
if ('orientation' in screen) {
screen.orientation.addEventListener('change', function () {
// Let's request fullscreen if user switches device in landscape mode.
if (screen.orientation.type.startsWith('landscape')) {
requestFullscreenVideo();
} else if (document.fullscreenElement) {
document.exitFullscreen();
}
});
}
बटन पर क्लिक करने पर स्क्रीन को लैंडस्केप मोड में लॉक करें
वीडियो को लैंडस्केप मोड में बेहतर तरीके से देखा जा सकता है. इसलिए, हम स्क्रीन लॉक लैंडस्केप मोड में दिखेगा. हम उन टूल और पहले इस्तेमाल किया गया स्क्रीन ओरिएंटेशन एपीआई और कुछ मीडिया क्वेरी का इस्तेमाल करें.
लैंडस्केप मोड में स्क्रीन लॉक करना, कॉल करने जितना आसान है
screen.orientation.lock('landscape'). हालांकि, हमें ऐसा सिर्फ़ तब करना चाहिए, जब
matchMedia('(orientation: portrait)') के साथ डिवाइस पोर्ट्रेट मोड में है और यह कर सकता है
matchMedia('(max-device-width: 768px)') को एक हाथ में पकड़कर रखें
तो यह टैबलेट इस्तेमाल करने वालों को बहुत अच्छा अनुभव नहीं देगा.
fullscreenButton.addEventListener('click', function (event) {
event.stopPropagation();
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
requestFullscreenVideo();
<strong>lockScreenInLandscape();</strong>;
}
});
function lockScreenInLandscape() {
if (!('orientation' in screen)) {
return;
}
// Let's force landscape mode only if device is in portrait mode and can be held in one hand.
if (
matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches
) {
screen.orientation.lock('landscape');
}
}
डिवाइस की स्क्रीन की दिशा में बदलाव करने पर स्क्रीन अनलॉक करें
आपने देखा होगा कि लॉक स्क्रीन का जो अनुभव हमने अभी-अभी बनाया है वह हालांकि, स्क्रीन लॉक होने पर हमें स्क्रीन ओरिएंटेशन में कोई बदलाव नहीं मिलता.
इसे ठीक करने के लिए, आइए डिवाइस ओरिएंटेशन एपीआई का इस्तेमाल करें, अगर
उपलब्ध हैं. यह एपीआई, किसी डिवाइस की
अंतरिक्ष में स्थिति और गति: जाइरोस्कोप और डिजिटल कंपास
स्क्रीन की दिशा, और एक्सलरोमीटर. जब हमें किसी डिवाइस का पता चलता है
स्क्रीन की दिशा में बदलाव हुआ है, तो screen.orientation.unlock() से स्क्रीन को अनलॉक करें, अगर
उपयोगकर्ता ने डिवाइस को पोर्ट्रेट मोड में पकड़ा हुआ है और स्क्रीन लैंडस्केप मोड में लॉक है.
function lockScreenInLandscape() {
if (!('orientation' in screen)) {
return;
}
// Let's force landscape mode only if device is in portrait mode and can be held in one hand.
if (matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches) {
screen.orientation.lock('landscape')
<strong>.then(function() {
listenToDeviceOrientationChanges();
})</strong>;
}
}
function listenToDeviceOrientationChanges() {
if (!('DeviceOrientationEvent' in window)) {
return;
}
var previousDeviceOrientation, currentDeviceOrientation;
window.addEventListener(
'deviceorientation',
function onDeviceOrientationChange(event) {
// event.beta represents a front to back motion of the device and
// event.gamma a left to right motion.
if (Math.abs(event.gamma) > 10 || Math.abs(event.beta) < 10) {
previousDeviceOrientation = currentDeviceOrientation;
currentDeviceOrientation = 'landscape';
return;
}
if (Math.abs(event.gamma) < 10 || Math.abs(event.beta) > 10) {
previousDeviceOrientation = currentDeviceOrientation;
// When device is rotated back to portrait, let's unlock screen orientation.
if (previousDeviceOrientation == 'landscape') {
screen.orientation.unlock();
window.removeEventListener(
'deviceorientation',
onDeviceOrientationChange,
);
}
}
},
);
}
जैसा कि आपको दिख रहा है, यह बिना किसी रुकावट के दिखने वाला फ़ुलस्क्रीन अनुभव है. इसे इस्तेमाल करने का तरीका देखने के लिए, सैंपल देखें.
बैकग्राउंड में वीडियो चलाना
अगर आपको कोई वेब पेज या वेब पेज पर मौजूद कोई वीडियो नहीं दिखता है, तो इसे दिखाने के लिए, अपने आंकड़ों को अपडेट किया जा सकता है. इसका असर भी पड़ सकता है मौजूदा प्लेबैक यानी कि कोई दूसरा ट्रैक चुनने, उसे रोकने या यहां तक कि दिखाने जैसे उदाहरण के लिए, उपयोगकर्ता को कस्टम बटन दिए जा सकें.
पेज पर वीडियो दिखने की सेटिंग में बदलाव रोकें
Page visibility API की मदद से, हम यह पता लगा सकते हैं कि और इसके दिखने से जुड़े बदलाव के बारे में सूचना पाएं. पेज पर जाने पर, नीचे दिया गया कोड वीडियो को रोक देता है छिपा हुआ है. ऐसा तब होता है, जब स्क्रीन लॉक चालू होता है या जब आप इंस्टेंस.
चूंकि ज़्यादातर मोबाइल ब्राउज़र अब ब्राउज़र के बाहर ऐसे नियंत्रण प्रदान करते हैं जो तो हमारी सलाह है कि आप यह व्यवहार तभी सेट करें जब उपयोगकर्ता को बैकग्राउंड में चलाने की अनुमति है.
document.addEventListener('visibilitychange', function () {
// Pause video when page is hidden.
if (document.hidden) {
video.pause();
}
});
वीडियो के दिखने की सेटिंग में बदलाव करने पर, 'म्यूट करें' बटन दिखाएं/छिपाएं
अगर आप नए Intersection Observer API का इस्तेमाल करते हैं, तो आप ज़्यादा जानकारी पा सकते हैं वह भी बिना किसी शुल्क के. इस एपीआई से आपको पता चलता है कि मॉनिटर किया जा रहा कोई एलिमेंट कब आपकी साइट के का व्यूपोर्ट सेट करें.
पेज पर वीडियो किसको दिखे, इसके हिसाब से म्यूट करें बटन को दिखाएं/छिपाएं. अगर आपने
वीडियो चल रहा है, लेकिन अभी नहीं दिख रहा है. एक छोटा म्यूट बटन यहां दिखेगा
नीचे दाएं कोने में भी यह सुविधा दिख सकती है, ताकि उपयोगकर्ता को वीडियो साउंड पर कंट्रोल मिल सके. कॉन्टेंट बनाने
volumechange वीडियो इवेंट का इस्तेमाल, म्यूट बटन की स्टाइल को अपडेट करने के लिए किया जाता है.
<button id="muteButton"></button>
if ('IntersectionObserver' in window) {
// Show/hide mute button based on video visibility in the page.
function onIntersection(entries) {
entries.forEach(function (entry) {
muteButton.hidden = video.paused || entry.isIntersecting;
});
}
var observer = new IntersectionObserver(onIntersection);
observer.observe(video);
}
muteButton.addEventListener('click', function () {
// Mute/unmute video on button click.
video.muted = !video.muted;
});
video.addEventListener('volumechange', function () {
muteButton.classList.toggle('active', video.muted);
});
एक बार में सिर्फ़ एक वीडियो चलाना
अगर किसी पेज पर एक से ज़्यादा वीडियो हैं, तो हमारा सुझाव है कि आप सिर्फ़ एक वीडियो चलाएं और दूसरे टाइमर को अपने-आप रोक दें, ताकि उपयोगकर्ता को उसकी आवाज़ न सुननी पड़े कई ऑडियो ट्रैक एक साथ चल रहे हैं.
// This array should be initialized once all videos have been added.
var videos = Array.from(document.querySelectorAll('video'));
videos.forEach(function (video) {
video.addEventListener('play', pauseOtherVideosPlaying);
});
function pauseOtherVideosPlaying(event) {
var videosToPause = videos.filter(function (video) {
return !video.paused && video != event.target;
});
// Pause all other videos currently playing.
videosToPause.forEach(function (video) {
video.pause();
});
}
मीडिया से मिलने वाली सूचनाओं को अपनी पसंद के मुताबिक बनाएं
Media Session API की मदद से, मीडिया को अपनी पसंद के मुताबिक भी बनाया जा सकता है नोटिफ़िकेशन के लिए, अभी चल रहे वीडियो के लिए मेटाडेटा उपलब्ध कराकर. यह भी आपको मीडिया से जुड़े इवेंट मैनेज करने की सुविधा मिलती है. जैसे, वीडियो पर आगे/पीछे जाना या बदलाव को ट्रैक करना जो सूचनाओं या मीडिया बटन से मिल सकती है. इसे काम करते हुए देखने के लिए, देखें सैंपल देखें.
जब आपका वेब ऐप्लिकेशन ऑडियो या वीडियो चला रहा हो, तब आपको पहले से ही मीडिया दिख सकता है सूचना ट्रे में मौजूद सूचना. Android पर, Chrome बेहतरीन तरीके से काम करता है दस्तावेज़ के टाइटल और सबसे बड़े हिस्से का इस्तेमाल करके, सही जानकारी दिखाएं मिल सकता है.
आइए, देखते हैं कि कुछ मीडिया सेट करके, इस मीडिया सूचना को अपनी पसंद के मुताबिक कैसे बनाया जा सकता है सेशन मेटाडेटा जैसे कि टाइटल, कलाकार, एल्बम का नाम, और आर्टवर्क मीडिया सेशन एपीआई.
playPauseButton.addEventListener('click', function(event) {
event.stopPropagation();
if (video.paused) {
video.play()
<strong>.then(function() {
setMediaSession();
});</strong>
} else {
video.pause();
}
});
function setMediaSession() {
if (!('mediaSession' in navigator)) {
return;
}
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Never Gonna Give You Up',
artist: 'Rick Astley',
album: 'Whenever You Need Somebody',
artwork: [
{src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png'},
{
src: 'https://dummyimage.com/128x128',
sizes: '128x128',
type: 'image/png',
},
{
src: 'https://dummyimage.com/192x192',
sizes: '192x192',
type: 'image/png',
},
{
src: 'https://dummyimage.com/256x256',
sizes: '256x256',
type: 'image/png',
},
{
src: 'https://dummyimage.com/384x384',
sizes: '384x384',
type: 'image/png',
},
{
src: 'https://dummyimage.com/512x512',
sizes: '512x512',
type: 'image/png',
},
],
});
}
वीडियो पूरा होने के बाद, आपको "रिलीज़" करने की ज़रूरत नहीं है मीडिया सेशन को इस तरह
सूचना अपने-आप हट जाएगी. ध्यान रखें कि मौजूदा
navigator.mediaSession.metadata का इस्तेमाल तब किया जाएगा, जब वीडियो चलना शुरू हो जाएगा. यह
इसलिए, यह पक्का करने के लिए कि आपके विज्ञापन हमेशा काम के दिखें, आपको इसे अपडेट करना होगा
मीडिया नोटिफ़िकेशन में जानकारी.
अगर आपका वेब ऐप्लिकेशन प्लेलिस्ट उपलब्ध कराता है, तो हो सकता है कि आप उपयोगकर्ता को नेविगेट करने की अनुमति देना चाहें मीडिया की सूचना में, "पीछे जाएं" के विकल्प के साथ अपनी प्लेलिस्ट के ज़रिए सीधे अपनी प्लेलिस्ट के ज़रिए ट्रैक करें" और "अगला ट्रैक" आइकॉन.
if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('previoustrack', function () {
// User clicked "Previous Track" media notification icon.
playPreviousVideo(); // load and play previous video
});
navigator.mediaSession.setActionHandler('nexttrack', function () {
// User clicked "Next Track" media notification icon.
playNextVideo(); // load and play next video
});
}
ध्यान दें कि मीडिया कार्रवाई हैंडलर बने रहेंगे. यह काफ़ी हद तक इस इवेंट से मिलता-जुलता है लिसनर पैटर्न को छोड़कर, किसी इवेंट को मैनेज करने का मतलब है कि ब्राउज़र बंद हो जाता है डिफ़ॉल्ट व्यवहार से जुड़े काम करती है और इसे सिग्नल के तौर पर इस्तेमाल करती है कि आपका वेब ऐप्लिकेशन मीडिया की कार्रवाई का समर्थन करता है. इसलिए, मीडिया के लिए कार्रवाई से जुड़े कंट्रोल तब तक नहीं दिखाए जाएंगे, जब तक कि तो आपको सही कार्रवाई हैंडलर सेट करना चाहिए.
वैसे, किसी मीडिया कार्रवाई हैंडलर को अनसेट करना, उसे null को असाइन करने जितना ही आसान है.
Media Session API की मदद से, "आगे-पीछे जाएं" को दिखाया जा सकता है और "आगे बढ़ें" मीडिया सूचना आइकन:
if ('mediaSession' in navigator) {
let skipTime = 10; // Time to skip in seconds
navigator.mediaSession.setActionHandler('seekbackward', function () {
// User clicked "Seek Backward" media notification icon.
video.currentTime = Math.max(video.currentTime - skipTime, 0);
});
navigator.mediaSession.setActionHandler('seekforward', function () {
// User clicked "Seek Forward" media notification icon.
video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
});
}
"चलाएं/रोकें" आइकन हमेशा मीडिया सूचना और संबंधित इवेंट को ब्राउज़र अपने-आप मैनेज करता है. अगर किसी वजह से डिफ़ॉल्ट व्यवहार काम नहीं करता, तब भी "चलाएं" को मैनेज किया जा सकता है और "रोको" मीडिया इवेंट.
मीडिया सत्र API के बारे में अच्छी बात यह है कि सूचना ट्रे वह सिर्फ़ एक जगह है जहां मीडिया का मेटाडेटा और कंट्रोल दिखते हैं. मीडिया सूचना, किसी भी जोड़े गए पहने जाने वाले डिवाइस से अपने-आप सिंक हो जाती है. और यह भी लॉक स्क्रीन पर दिखता है.