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

Jeremy Wagner

Rachel Andrew

इमेज एलिमेंट की तरह ही, वीडियो को भी लेज़ी-लोड किया जा सकता है. वीडियो आम तौर पर <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>

ऊपर दिए गए उदाहरण में, ब्राउज़र को रोकने के लिए 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" का इस्तेमाल करना, YouTube पर वीडियो लोड होने को रोकने का सबसे आसान तरीका है सभी प्लैटफ़ॉर्म पर. लोड होने की प्रोसेस को टालने का, 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 एट्रिब्यूट के बारे में अपने-आप जानकारी मिल जाती है. अपने-आप चलने के लिए playsinline ज़रूरी है iOS. अब आपके पास किसी भी प्लैटफ़ॉर्म पर काम करने वाले, वीडियो के तौर पर 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 एट्रिब्यूट की वैल्यू में वीडियो का यूआरएल छिपाया गया हो एलिमेंट. वहां से, इंटरसेक्शन पर आधारित ऑब्ज़र्वर पर आधारित इमेज लेज़ी लोडिंग के उदाहरण:

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-lazyload के तहत आते हैं. हालांकि, यह इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल नहीं करता, यह लेज़ी का जाना-पहचाना तरीका उपलब्ध करता है उन लोगों के लिए इमेज लोड कर रहा है जिन्हें React की मदद से ऐप्लिकेशन डेवलप करने में दिलचस्पी है.

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