मोबाइल वेब पर वीडियो चलाना

वेब पर मोबाइल मीडिया का बेहतरीन अनुभव कैसे बनाया जा सकता है? आसान है! यह सब इस पर निर्भर करता है कि उपयोगकर्ता का जुड़ाव है या नहीं. साथ ही, यह इस बात पर भी निर्भर करता है कि आपने किसी वेब पेज पर, मीडिया को कितनी अहमियत दी है. हमें लगता है कि हम सभी इस बात से सहमत हैं कि अगर किसी उपयोगकर्ता के ऐप्लिकेशन पर आने की वजह वीडियो है, तो उसे ऐसा अनुभव देना चाहिए जिससे वह ऐप्लिकेशन में दिलचस्पी बनाए रख सके.

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

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() का इस्तेमाल करें. अगर यह तरीका उपलब्ध नहीं है, तो सिर्फ़ 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);
});

स्क्रीन की ओरिएंटेशन बदलने पर फ़ुलस्क्रीन टॉगल करें

जब उपयोगकर्ता, लैंडस्केप मोड में डिवाइस को घुमाता है, तब इस पर ध्यान दें. साथ ही, इमर्सिव अनुभव बनाने के लिए, फ़ुलस्क्रीन मोड का अपने-आप अनुरोध करें. इसके लिए, हमें Screen Orientation API की ज़रूरत होगी. यह API अभी तक हर जगह काम नहीं करता. साथ ही, कुछ ब्राउज़र में अब भी प्रीफ़िक्स का इस्तेमाल किया जाता है. इस तरह, यह हमारा पहला क्रमिक सुधार होगा.

यह कैसे काम करता है? जैसे ही हमें स्क्रीन ओरिएंटेशन में होने वाले बदलावों का पता चलता है, अगर ब्राउज़र विंडो लैंडस्केप मोड में है (यानी, उसकी चौड़ाई इसकी ऊंचाई से ज़्यादा है), तो चलिए पूरी स्क्रीन का अनुरोध करते हैं. अगर नहीं, तो फ़ुलस्क्रीन मोड से बाहर निकलें. बस इतना ही।

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

जैसा कि आप देख सकते हैं, यह फ़ुलस्क्रीन मोड में वीडियो देखने का बेहतरीन अनुभव है. इसे काम करते हुए देखने के लिए, सैंपल देखें.

बैकग्राउंड में वीडियो चलाना

अगर आपको पता चलता है कि कोई वेब पेज या उस पर मौजूद वीडियो अब नहीं दिख रहा है, तो इसे दिखाने के लिए अपने आंकड़े अपडेट करें. इससे मौजूदा वीडियो पर भी असर पड़ सकता है. जैसे, कोई दूसरा ट्रैक चुनना, उसे रोकना या उपयोगकर्ता को कस्टम बटन दिखाना.

पेज दिखने की सेटिंग में बदलाव होने पर वीडियो रोकना

पेज की पहुंच से जुड़े एपीआई की मदद से, हम यह तय कर सकते हैं कि किसी पेज को फ़िलहाल किसको दिखाया जा रहा है. साथ ही, पेज के दिखने की स्थिति में होने वाले बदलावों की सूचना भी मिलती है. नीचे दिया गया कोड, पेज के छिपने पर वीडियो को रोक देता है. ऐसा तब होता है, जब स्क्रीन लॉक चालू हो या उदाहरण के लिए, टैब स्विच किए जाएं.

ज़्यादातर मोबाइल ब्राउज़र में अब ब्राउज़र के बाहर भी कंट्रोल उपलब्ध होते हैं. इनकी मदद से, रोके गए वीडियो को फिर से चलाया जा सकता है. हमारा सुझाव है कि आप इस सुविधा को सिर्फ़ तब सेट करें, जब उपयोगकर्ता को बैकग्राउंड में वीडियो चलाने की अनुमति हो.

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 को असाइन करना.

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 की सबसे अच्छी बात यह है कि मीडिया का मेटाडेटा और कंट्रोल, सिर्फ़ सूचना ट्रे में ही नहीं दिखते. मीडिया की सूचना, जोड़े गए किसी भी पहने जा सकने वाले डिवाइस पर अपने-आप सिंक हो जाती है. यह लॉक स्क्रीन पर भी दिखता है.

सुझाव/राय दें या शिकायत करें