लेज़ी लोडिंग वीडियो

Jeremy Wagner

Rachel Andrew

इमेज एलिमेंट की तरह ही, वीडियो को भी लेज़ी-लोड किया जा सकता है. आम तौर पर, वीडियो में <video> एलिमेंट लोड होता है. हालांकि, <img> का इस्तेमाल करके, इस एलिमेंट को सीमित तौर पर लागू करने के बाद, दूसरा तरीका जोड़ा गया है. हालांकि, <video> को लेज़ी-लोड करने का तरीका, इस्तेमाल के उदाहरण पर निर्भर करता है. चलिए, कुछ ऐसी स्थितियों पर चर्चा करते हैं जिनमें हर एक के लिए अलग समाधान की ज़रूरत होती है.

अपने-आप न चलने वाले वीडियो के लिए

ऐसे वीडियो के लिए <video> एलिमेंट में preload एट्रिब्यूट की जानकारी देना ज़रूरी होगा जिसमें उपयोगकर्ता ने वीडियो चलाना शुरू किया हो (यानी जो वीडियो अपने-आप नहीं चलते):

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

अहम जानकारी: posterवीडियो की इमेज को एलसीपी उम्मीदवारों के तौर पर माना जा सकता है. अगर आपकी poster इमेज एक एलसीपी कैंडिडेट है, तो आपको fetchpriority एट्रिब्यूट की वैल्यू "high" के साथ पहले से लोड करना चाहिए, ताकि उपयोगकर्ता उसे जल्द से जल्द देख सके.

ऊपर दिए गए उदाहरण में, none वैल्यू वाले preload एट्रिब्यूट का इस्तेमाल किया गया है, ताकि ब्राउज़र किसी वीडियो डेटा को पहले से लोड होने से रोक सकें. poster एट्रिब्यूट की मदद से, <video> एलिमेंट को एक प्लेसहोल्डर मिलता है. यह वीडियो लोड होने के दौरान, उस जगह का इस्तेमाल करेगा. इसकी वजह यह है कि हर ब्राउज़र के लिए, वीडियो लोड करने के डिफ़ॉल्ट तरीके अलग-अलग हो सकते हैं:

• Chrome में, पहले preload का डिफ़ॉल्ट विकल्प auto होता था. हालांकि, Chrome 64 के बाद से, अब यह डिफ़ॉल्ट तौर पर metadata पर सेट हो जाता है. फिर भी, Chrome के डेस्कटॉप वर्शन पर, Content-Range हेडर का इस्तेमाल करके वीडियो के किसी हिस्से को पहले से लोड किया जा सकता है. अन्य Chromium-आधारित ब्राउज़र और Firefox इसी तरह काम करते हैं.
• डेस्कटॉप पर Chrome की तरह, Safari का 11.0 डेस्कटॉप वर्शन होने पर, वीडियो को पहले से लोड करके रखा जाएगा. वर्शन 11.2 से, सिर्फ़ वीडियो का मेटाडेटा पहले से लोड किया गया है. iOS पर Safari में, वीडियो कभी भी पहले से लोड नहीं किए जाते.
• डेटा बचाने की सेटिंग वाला मोड चालू होने पर, preload डिफ़ॉल्ट रूप से none पर सेट होता है.

preload के बारे में ब्राउज़र के डिफ़ॉल्ट व्यवहार में बदलाव नहीं किया गया है. इसलिए, हो सकता है कि इस बारे में साफ़ तौर पर जानकारी देना आपके लिए सबसे सही रहेगा. ऐसे मामलों में, जहां उपयोगकर्ता प्लेबैक शुरू करता है, तो preload="none" का इस्तेमाल करना, सभी प्लैटफ़ॉर्म पर वीडियो लोड होने से रोकने का सबसे आसान तरीका है. वीडियो कॉन्टेंट लोड होने की प्रोसेस को रोकने का सिर्फ़ preload एट्रिब्यूट ही नहीं है. वीडियो को पहले से लोड करने की सुविधा की मदद से तेज़ी से वीडियो चलाने की सुविधा से, आपको JavaScript में वीडियो चलाने की सुविधा के साथ काम करने के कुछ आइडिया और अहम जानकारी मिल सकती है.

माफ़ करें, यह तब फ़ायदेमंद नहीं होता, जब आपको ऐनिमेशन वाले ऐसे GIF की जगह वीडियो का इस्तेमाल करना हो जिनके बारे में आगे बताया गया है.

ऐनिमेशन वाले GIF की जगह इस्तेमाल करने वाले वीडियो के लिए

ऐनिमेशन वाले GIF काफ़ी ज़्यादा इस्तेमाल किए जाते हैं, लेकिन कई मायनों में, वे किसी वीडियो से मिलते-जुलते वीडियो से मिलते-जुलते हैं, खास तौर पर फ़ाइल के साइज़ के मामले में. ऐनिमेट किए गए GIF कई मेगाबाइट डेटा में आ सकते हैं. एक जैसी विज़ुअल क्वालिटी वाले वीडियो, बहुत छोटे होते हैं.

ऐनिमेशन वाले GIF की जगह <video> एलिमेंट का इस्तेमाल करना, <img> एलिमेंट की तरह आसान नहीं है. ऐनिमेशन वाले GIF की तीन विशेषताएं होती हैं:

1. लोड होने पर ये विज्ञापन अपने-आप चलने लगते हैं.
2. वे लगातार लूप में चलते हैं (हालांकि, ऐसा हमेशा नहीं होता).
3. इनमें ऑडियो ट्रैक नहीं है.

<video> एलिमेंट से इसे हासिल करना कुछ ऐसा दिखता है:

<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

autoplay, muted, और loop एट्रिब्यूट के बारे में अपने-आप जानकारी मिल जाती है. iOS में वीडियो अपने-आप चलने के लिए, playsinline ज़रूरी है. अब आपके पास वीडियो के तौर पर GIF को बदलने की सुविधा है, जो हर प्लैटफ़ॉर्म पर काम करती है. इसे लेज़ी लोड करने के बारे में क्या करें? शुरू करने के लिए, अपने <video> मार्कअप में ज़रूरत के हिसाब से बदलाव करें:

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

आपको एक poster एट्रिब्यूट दिखेगा. इससे जब तक वीडियो लेज़ी-लोड नहीं हो जाता, तब तक एक प्लेसहोल्डर तय किया जा सकता है, ताकि वह <video> एलिमेंट की जगह का इस्तेमाल कर सके. <img> लेज़ी लोडिंग के उदाहरणों की तरह, हर <source> एलिमेंट पर data-src एट्रिब्यूट में वीडियो के यूआरएल को छिपाएं. वहां से, इंटरसेक्शन पर ऑब्ज़र्वर पर आधारित इमेज लेज़ी लोडिंग के उदाहरणों से मिलते-जुलते JavaScript कोड का इस्तेमाल करें:

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

किसी <video> एलिमेंट को लेज़ी-लोड करने पर, आपको सभी चाइल्ड <source> एलिमेंट को दोहराना होगा और उनके data-src एट्रिब्यूट को src एट्रिब्यूट में बदलना होगा. इसके बाद, आपको एलिमेंट के load तरीके को कॉल करके, वीडियो लोड होना शुरू करना होगा. इसके बाद, autoplay एट्रिब्यूट के हिसाब से मीडिया अपने-आप चलना शुरू हो जाएगा.

इस तरीके का इस्तेमाल करने पर, आपके पास एक ऐसा वीडियो सलूशन है जो ऐनिमेशन वाले GIF के व्यवहार की नकल करता है. हालांकि, इसका डेटा खर्च ऐनिमेशन वाले GIF की तरह ज़्यादा नहीं होता है और उस कॉन्टेंट को लेज़ी लोड किया जा सकता है.

लेज़ी लोडिंग लाइब्रेरी

यहां दी गई लाइब्रेरी, वीडियो को लेज़ी-लोड करने में आपकी मदद कर सकती हैं:

• vanilla-lazyload और lozad.js ऐसे बहुत ही कम वज़न वाले विकल्प हैं जो सिर्फ़ इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल करते हैं. इस तरह, वे ज़्यादा बेहतर परफ़ॉर्म करते हैं, लेकिन पुराने ब्राउज़र पर इस्तेमाल करने से पहले उन्हें पॉलीफ़िल करना होगा.
• yall.js एक ऐसी लाइब्रेरी है जो इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल करती है और इवेंट हैंडलर पर वापस जाती है. यह data-poster एट्रिब्यूट का इस्तेमाल करके, वीडियो poster इमेज को लेज़ी लोड कर सकता है.
• अगर आपको रिऐक्ट के हिसाब से लेज़ी लोडिंग वाली लाइब्रेरी की ज़रूरत है, तो रिऐक्ट-लेज़ीलोड का इस्तेमाल करें. यह इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल नहीं करता, लेकिन यह उन लोगों के लिए लेज़ी लोडिंग इमेज का जाना-पहचाना तरीका उपलब्ध करता है जो React की मदद से ऐप्लिकेशन डेवलप करने में माहिर हैं.

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