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

जेरेमी वैगनर

रेचल ऐंड्रू

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

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

जिन वीडियो के लिए उपयोगकर्ता वीडियो चलाने की सुविधा नहीं लेताpreload<video>

<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 एक ऐसी लाइब्रेरी है जो Intersection ऑब्ज़र्वर का इस्तेमाल करती है और फिर इवेंट हैंडलर पर वापस जाती है. यह data-poster एट्रिब्यूट का इस्तेमाल करके, वीडियो poster इमेज को लेज़ी लोड भी कर सकता है.
• अगर आपको प्रतिक्रिया के लिए खास तौर पर लेज़ी लोडिंग लाइब्रेरी की ज़रूरत है, तो react-lazyload करें. यह 'इंटरसेक्शन ऑब्ज़र्वर' का इस्तेमाल नहीं करता है, लेकिन यह उन लोगों के लिए लेज़ी लोडिंग का एक जाना-पहचाना तरीका उपलब्ध करता है जो रिऐक्ट वाले ऐप्लिकेशन डेवलप करने के आदी हैं.

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