आप वेब पर सबसे अच्छा मोबाइल मीडिया अनुभव कैसे बनाते हैं? आसान! यह सब उपयोगकर्ता की दिलचस्पी और किसी वेब पेज पर मीडिया को दी गई अहमियत पर निर्भर करता है. मुझे लगता है कि हम सभी इस बात से सहमत हैं कि अगर वीडियो किसी उपयोगकर्ता के देखे जाने की वजह है, तो उसका अनुभव इमर्सिव और फिर से जुड़ने लायक होना चाहिए.
इस लेख में बताया गया है कि अलग-अलग तरह के वेब एपीआई की मदद से, अपने मीडिया अनुभव को बेहतर कैसे बनाएं. साथ ही, इसे और ज़्यादा दिलचस्प कैसे बनाएं. इसलिए, हम कस्टम कंट्रोल, फ़ुलस्क्रीन, और बैकग्राउंड में वीडियो चलाने की सुविधा के साथ, मोबाइल प्लेयर को इस्तेमाल करने का आसान अनुभव देने जा रहे हैं. आप अभी यह सैंपल आज़मा सकते हैं और हमारे 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');
});
जब timeupdate वीडियो इवेंट के ज़रिए, वीडियो currentTime एट्रिब्यूट के ज़रिए दिखाया गया समय बदलता है, तो हम अपने कस्टम कंट्रोल भी अपडेट कर देते हैं. ऐसा तब ही होता है, जब वे दिख रहे हों.
video.addEventListener('timeupdate', function () {
if (videoControls.classList.contains('visible')) {
videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
videoProgressBar.style.transform = `scaleX(${
video.currentTime / video.duration
})`;
}
});
वीडियो खत्म होने के बाद, हम बटन की स्थिति को बदलकर "चलाएं" कर देते हैं. साथ ही, वीडियो
currentTime को वापस 0 पर सेट कर देते हैं और फ़िलहाल वीडियो कंट्रोल दिखाते हैं. ध्यान दें कि अगर उपयोगकर्ता ने किसी तरह की "ऑटोप्ले" सुविधा
चालू की है, तो हम दूसरा वीडियो अपने-आप लोड होने का विकल्प भी चुन सकते हैं.
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');
});
हमने अब तक जो बनाया है वह नीचे दिया गया है. अगले सेक्शन में, हम फ़ुलस्क्रीन बटन लागू करेंगे.
फ़ुलस्क्रीन
यहां हम बेहतरीन और आसान फ़ुलस्क्रीन अनुभव देने के लिए कई वेब API का फ़ायदा लेने जा रहे हैं. यह कैसे काम करता है यह देखने के लिए, सैंपल देखें.
साफ़ तौर पर, आपको इन सभी का इस्तेमाल करने की ज़रूरत नहीं है. बस वे विज्ञापन चुनें जो आपको समझ में आएं और उन्हें मिलाकर अपनी पसंद के मुताबिक फ़्लो बनाएं.
अपने-आप फ़ुलस्क्रीन मोड इस्तेमाल करने से रोकें
iOS पर, मीडिया चलने पर video एलिमेंट अपने-आप फ़ुलस्क्रीन मोड में आ जाते हैं. हम मोबाइल ब्राउज़र पर अपने मीडिया अनुभव को ज़्यादा से ज़्यादा बेहतर बनाने की कोशिश कर रहे हैं. हमारा सुझाव है कि आप video एलिमेंट का playsinline एट्रिब्यूट सेट करें, ताकि वह 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() तरीके का इस्तेमाल करके, वीडियो कंटेनर पर फ़ुलस्क्रीन मोड का अनुरोध करें. अगर आपके पास वीडियो एलिमेंट है, तो
सिर्फ़ iOS पर, webkitEnterFullscreen() पर वापस आएं.
<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,
);
}
}
},
);
}
जैसा कि आप देख सकते हैं, यह सहज फ़ुलस्क्रीन अनुभव है जिसकी हम तलाश कर रहे थे. इसे काम करने के तरीके के बारे में जानने के लिए, सैंपल देखें.
बैकग्राउंड में वीडियो चलाना
अगर आपको किसी वेब पेज या उस वेब पेज में मौजूद कोई वीडियो नहीं दिखता है, तो उसे दिखाने के लिए अपने आंकड़ों को अपडेट किया जा सकता है. इससे मौजूदा प्लेबैक पर भी असर पड़ सकता है, जैसे कि दूसरा ट्रैक चुनना, उसे रोकना या उपयोगकर्ता को कस्टम बटन दिखाना.
पेज पर वीडियो दिखने में बदलाव को रोकें
पेज विज़िबिलिटी एपीआई की मदद से, यह पता लगाया जा सकता है कि कोई पेज किसको दिखे. साथ ही, उसके दिखने में होने वाले बदलावों के बारे में सूचना भी मिल सकती है. पेज छिपा होने पर, नीचे दिया गया कोड वीडियो को रोक देता है. ऐसा स्क्रीन लॉक चालू होने पर या इंस्टेंस के लिए टैब बदलने पर होता है.
ज़्यादातर मोबाइल ब्राउज़र में अब ब्राउज़र के बाहर ऐसे कंट्रोल मिलते हैं जो रोके गए वीडियो को फिर से चलाने की अनुमति देते हैं. हमारा सुझाव है कि आप इस व्यवहार को सिर्फ़ तब सेट करें, जब उपयोगकर्ता को बैकग्राउंड में वीडियो चलाने की अनुमति हो.
document.addEventListener('visibilitychange', function () {
// Pause video when page is hidden.
if (document.hidden) {
video.pause();
}
});
वीडियो दिखने में बदलाव होने पर, 'म्यूट करें' बटन दिखाएं/छिपाएं
नए Intersection ऑब्ज़र्वर एपीआई का इस्तेमाल करके, बिना किसी शुल्क के ज़्यादा जानकारी पाई जा सकती है. इस एपीआई से आपको यह पता चलता है कि मॉनिटर किया गया कोई एलिमेंट, ब्राउज़र के व्यूपोर्ट में कब शामिल होता है या उससे बाहर निकलता है.
चलिए, पेज पर वीडियो दिखने के आधार पर 'म्यूट करें' बटन दिखाते/छिपाते हैं. अगर
वीडियो चल रहा है, लेकिन अभी नहीं दिख रहा है, तो पेज के सबसे नीचे दाएं कोने में एक छोटा म्यूट बटन दिखेगा.
इससे उपयोगकर्ताओं को वीडियो आवाज़ पर कंट्रोल मिलेगा. 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 दस्तावेज़ के शीर्षक और उसे मिलने वाले सबसे बड़े आइकॉन इमेज का इस्तेमाल करके सही जानकारी दिखाने की पूरी कोशिश करता है.
आइए, Media Session API की मदद से शीर्षक, कलाकार, एल्बम का नाम और आर्टवर्क जैसे कुछ मीडिया सेशन मेटाडेटा को सेट करके, इस मीडिया सूचना को पसंद के मुताबिक बनाने का तरीका देखें.
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);
});
}
मीडिया नोटिफ़िकेशन में "चलाएं/रोकें" आइकॉन हमेशा दिखता है और इससे जुड़े इवेंट, ब्राउज़र अपने-आप मैनेज करता है. अगर किसी वजह से डिफ़ॉल्ट व्यवहार काम नहीं करता है, तो भी "चलाएं" और "रोकें" मीडिया इवेंट को हैंडल किया जा सकता है.
Media Session API की खास बात यह है कि सूचना ट्रे ही वह इकलौती जगह नहीं है जहां मीडिया मेटाडेटा और कंट्रोल दिखते हैं. मीडिया सूचना, पहने जाने वाले किसी भी डिवाइस से अपने-आप सिंक हो जाती है. और वह लॉक स्क्रीन पर भी दिखता है.