DOMअपवाद - play() अनुरोध रोका गया

François Beaufort
François Beaufort
GitHub

क्या आपको Chrome DevTools के JavaScript कंसोल में, मीडिया से जुड़ी यह गड़बड़ी अचानक दिखी है?

या

तो आप सही जगह पर हैं. डरें नहीं. हम आपको बताएंगे कि यह समस्या क्यों हो रही है और इसे कैसे ठीक किया जा सकता है.

इसकी वजह क्या है

यहां कुछ JavaScript कोड दिया गया है, जो आपको दिख रही "Uncaught (in promise)" गड़बड़ी को दोहराता है:

यह न करें
<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
  video.play(); // <-- This is asynchronous!
  video.pause();
</script>

ऊपर दिए गए कोड की वजह से, Chrome DevTools में गड़बड़ी का यह मैसेज दिखता है:

_Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

preload="none" की वजह से वीडियो लोड नहीं हो पाता है. इसलिए, video.play() लागू होने के बाद भी, वीडियो चलाना ज़रूरी नहीं है.

इसके अलावा, Chrome 50 के बाद से, <video> या <audio> एलिमेंट पर play() कॉल करने पर, Promise फ़ंक्शन का इस्तेमाल होता है. यह फ़ंक्शन, एक ही नतीजा असाइनॉन्स के साथ दिखाता है. अगर वीडियो चलाने में सफलता मिलती है, तो प्रॉमिस पूरा हो जाता है और एक ही समय पर playing इवेंट ट्रिगर हो जाता है. अगर वीडियो नहीं चलता है, तो Promise को अस्वीकार कर दिया जाता है. साथ ही, गड़बड़ी के बारे में बताने वाला गड़बड़ी का मैसेज भी दिखता है.

अब यह देखें कि क्या हो रहा है:

  1. video.play() वीडियो कॉन्टेंट को अलग-अलग समय पर लोड करना शुरू करता है.
  2. video.pause() वीडियो लोड होने में रुकावट आती है, क्योंकि वह अभी तैयार नहीं है.
  3. video.play(), एसिंक्रोनस तरीके से ज़ोर से अस्वीकार करता है.

हम अपने कोड में वीडियो चलाने के प्रॉमिस को मैनेज नहीं कर रहे हैं. इसलिए, Chrome DevTools में गड़बड़ी का मैसेज दिखता है.

इसे कैसे ठीक करें

अब हमें इस समस्या की मुख्य वजह पता चल गई है. अब देखते हैं कि इसे ठीक करने के लिए क्या किया जा सकता है.

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

यह करें

उदाहरण: वीडियो अपने-आप चलना

<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
  // Show loading animation.
  var playPromise = video.play();

  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
</script>
यह करें

उदाहरण: चलाएं और रोकें

<video id="video" preload="none" src="https://example.com/file.mp4"></video>
 
<script>
  // Show loading animation.
  var playPromise = video.play();
 
  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
      // We can now safely pause video...
      video.pause();
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
</script>

इस आसान उदाहरण के लिए यह तरीका बहुत अच्छा है. हालांकि, अगर आपको किसी वीडियो को बाद में चलाना है, तो video.play() का इस्तेमाल कैसे करें?

मैं आपको एक राज़ बताऊंगा. आपको video.play() का इस्तेमाल करने की ज़रूरत नहीं है. इसके बजाय, video.load() का इस्तेमाल किया जा सकता है. इसका तरीका यहां बताया गया है:

यह करें

उदाहरण: फ़ेच और चलाएं

<video id="video"></video>
<button id="button"></button>

<script>
  button.addEventListener('click', onButtonClick);

  function onButtonClick() {
    // This will allow us to play video later...
    video.load();
    fetchVideoAndPlay();
  }

  function fetchVideoAndPlay() {
    fetch('https://example.com/file.mp4')
    .then(response => response.blob())
    .then(blob => {
      video.srcObject = blob;
      return video.play();
    })
    .then(_ => {
      // Video playback started ;)
    })
    .catch(e => {
      // Video playback failed ;(
    })
  }
</script>

Play के वादे से जुड़ी सहायता

फ़िलहाल, HTMLMediaElement.play() Chrome, Edge, Firefox, Opera, और Safari में एक प्रॉमिस दिखाता है.

खतरे का ज़ोन

<source> में <video>, play() के लिए कभी भी वादा अस्वीकार नहीं करता

<video src="not-existing-video.mp4"\> के लिए, play() का वादा अस्वीकार कर दिया गया है, क्योंकि वीडियो मौजूद नहीं है. <video><source src="not-existing-video.mp4" type='video/mp4'></video> के लिए, play() वादा कभी अस्वीकार नहीं करता. ऐसा सिर्फ़ तब होता है, जब कोई मान्य सोर्स न हो.

Chromium में गड़बड़ी