वेब पर मोबाइल मीडिया का सबसे अच्छा अनुभव कैसे दिया जा सकता है? आसान है! यह सब इस बात पर निर्भर करता है कि उपयोगकर्ता की दिलचस्पी किसमें है और आपने वेब पेज पर मौजूद मीडिया को कितनी अहमियत दी है. मुझे लगता है कि हम सभी इस बात से सहमत हैं कि अगर कोई उपयोगकर्ता किसी वीडियो को देखने के लिए आपकी साइट पर आता है, तो उसे वीडियो देखने का बेहतरीन अनुभव मिलना चाहिए. साथ ही, उसे फिर से वीडियो देखने के लिए प्रेरित किया जाना चाहिए.
इस लेख में, मैंने आपको मीडिया के अनुभव को बेहतर बनाने का तरीका बताया है. साथ ही, कई वेब एपीआई की मदद से, इसे और ज़्यादा इमर्सिव बनाने का तरीका भी बताया है. इसलिए, हम मोबाइल प्लेयर को इस्तेमाल करने का आसान अनुभव देने जा रहे हैं. इसमें कस्टम कंट्रोल, फ़ुलस्क्रीन, और बैकग्राउंड में वीडियो चलाने की सुविधा शामिल है. सैंपल को अभी आज़माया जा सकता है. साथ ही, हमारी 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');
});
हमने अब तक जो सुविधाएं बनाई हैं उनकी जानकारी यहां दी गई है. अगले सेक्शन में, हम फ़ुलस्क्रीन बटन को लागू करेंगे.
फ़ुलस्क्रीन
यहां हम कई वेब एपीआई का फ़ायदा लेंगे, ताकि फ़ुलस्क्रीन का बेहतरीन और आसान अनुभव दिया जा सके. इसका उदाहरण देखने के लिए, सैंपल देखें.
ज़ाहिर है कि आपको इन सभी का इस्तेमाल करने की ज़रूरत नहीं है. बस उन चरणों को चुनें जो आपके लिए सही हैं और उन्हें मिलाकर अपना कस्टम फ़्लो बनाएं.
फ़ुलस्क्रीन मोड अपने-आप चालू होने से रोकना
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>
बटन पर क्लिक करके, फ़ुलस्क्रीन मोड को टॉगल करना
अब हम फ़ुलस्क्रीन मोड अपने-आप चालू होने की सुविधा को रोकते हैं. इसलिए, हमें फ़ुलस्क्रीन एपीआई की मदद से, वीडियो के लिए फ़ुलस्क्रीन मोड को खुद मैनेज करना होगा. जब उपयोगकर्ता "फ़ुलस्क्रीन बटन" पर क्लिक करे, तो 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');
}
}
डिवाइस का ओरिएंटेशन बदलने पर स्क्रीन अनलॉक करना
आपने देखा होगा कि हमने लॉक स्क्रीन के लिए जो अनुभव तैयार किया है वह पूरी तरह से सही नहीं है. ऐसा इसलिए है, क्योंकि स्क्रीन लॉक होने पर हमें स्क्रीन ओरिएंटेशन में होने वाले बदलावों की जानकारी नहीं मिलती.
इस समस्या को ठीक करने के लिए, अगर Device Orientation API उपलब्ध है, तो उसका इस्तेमाल करें. यह एपीआई, डिवाइस की पोज़िशन और स्पेस में उसकी गति को मापने वाले हार्डवेयर से जानकारी देता है: ओरिएंटेशन के लिए जाइरोस्कोप और डिजिटल कंपास, और गति के लिए एक्सलरोमीटर. जब हमें डिवाइस के ओरिएंटेशन में बदलाव का पता चलता है, तो 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();
}
});
वीडियो दिखने की सेटिंग बदलने पर, 'म्यूट करें' बटन को दिखाना/छिपाना
अगर नए इंटरसेक्शन ऑब्ज़र्वर एपीआई का इस्तेमाल किया जाता है, तो बिना किसी शुल्क के ज़्यादा जानकारी हासिल की जा सकती है. इस एपीआई से आपको पता चलता है कि मॉनिटर किया जा रहा कोई एलिमेंट, ब्राउज़र के व्यूपोर्ट में कब दिखता है या कब नहीं दिखता.
आइए, पेज पर वीडियो दिखने के आधार पर, 'म्यूट करें' बटन को दिखाते/छिपाते हैं. अगर वीडियो चल रहा है, लेकिन फ़िलहाल नहीं दिख रहा है, तो पेज के सबसे नीचे दाएं कोने में, म्यूट करने का एक छोटा बटन दिखेगा. इससे उपयोगकर्ता, वीडियो की आवाज़ को कंट्रोल कर सकता है. 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 पर असाइन करना.
मीडिया सेशन एपीआई की मदद से, "पीछे जाएं" और "आगे जाएं" मीडिया सूचना आइकॉन दिखाए जा सकते हैं. ऐसा तब किया जा सकता है, जब आपको स्किप किए गए समय को कंट्रोल करना हो.
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 की सबसे अच्छी बात यह है कि मीडिया मेटाडेटा और कंट्रोल, सिर्फ़ नोटिफ़िकेशन ट्रे में ही नहीं दिखते. मीडिया की सूचना, पहने जाने वाले किसी भी डिवाइस के साथ अपने-आप सिंक हो जाती है. यह लॉक स्क्रीन पर भी दिखता है.