पब्लिश होने की तारीख: 16 अगस्त, 2019, पिछली बार अपडेट होने की तारीख: 2 जुलाई, 2026
इमेज एलिमेंट की तरह ही, वीडियो को भी देर से लोड किया जा सकता है. आम तौर पर, वीडियो को <video> एलिमेंट के साथ लोड किया जाता है. हालांकि, YouTube जैसी अन्य सेवाओं पर होस्ट किए गए वीडियो के लिए, वे <iframe>s का इस्तेमाल कर सकते हैं. ऐसे में, लेज़ी-लोडिंग वाले iframe में मौजूद लेख पढ़ें.
<video> को लेज़ी-लोड करने का तरीका, इस्तेमाल के उदाहरण पर निर्भर करता है. ऐसा इसलिए, क्योंकि इसके लिए कुछ अलग-अलग समाधान उपलब्ध हैं.
loading एट्रिब्यूट का इस्तेमाल करना
ब्राउज़र, मीडिया एलिमेंट (<video> और <audio>) पर loading एट्रिब्यूट का इस्तेमाल करने की सुविधा देने लगे हैं. जहां यह सुविधा उपलब्ध है वहां इसका मतलब है कि loading="lazy" एट्रिब्यूट जोड़ने पर, मीडिया और पोस्टर इमेज, दोनों को लेज़ी लोड किया जाता है:
<video controls loading="lazy" 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>
loading="lazy" का इस्तेमाल करने पर, poster इमेज तब तक लोड नहीं होगी, जब तक वह व्यूपोर्ट में या उसके आस-पास नहीं आ जाती. इसके बाद, preload एट्रिब्यूट का इस्तेमाल करके यह तय किया जाएगा कि video का कितना हिस्सा लोड करना है. इसका यह भी मतलब है कि autoplay वीडियो, व्यूपोर्ट में या उसके आस-पास होने तक अपने-आप नहीं चलेंगे. loading="lazy" एट्रिब्यूट, poster, preload, और autoplay एट्रिब्यूट के साथ काम करता है. हालांकि, इससे इन एट्रिब्यूट की ज़रूरत खत्म नहीं होती.
मीडिया एलिमेंट पर loading एट्रिब्यूट का इस्तेमाल न करने वाले ब्राउज़र, इस एट्रिब्यूट को अनदेखा कर देंगे. इससे poster इमेज तुरंत लोड हो जाएगी और वीडियो, preload एट्रिब्यूट के आधार पर लोड होगा. इसके बारे में हम आगे बताएंगे.
अपने-आप नहीं चलने वाले वीडियो को लेज़ी-लोड करने के लिए, preload एट्रिब्यूट का इस्तेमाल करना
वीडियो अपने-आप चलने की सुविधा को बंद रखना सबसे सही तरीका है. इससे वीडियो चलाने का कंट्रोल उपयोगकर्ता के पास रहता है. ऐसे मामलों में, <video> एलिमेंट पर preload एट्रिब्यूट की वैल्यू सेट करना सबसे अच्छा तरीका है. इससे, जब तक ज़रूरी न हो तब तक पूरा वीडियो लोड नहीं होगा:
<video controls loading="lazy" 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>
पिछले उदाहरण में, preload एट्रिब्यूट का इस्तेमाल किया गया है. इसकी वैल्यू none है. इससे ब्राउज़र, किसी भी वीडियो डेटा को पहले से लोड नहीं करते हैं. भले ही, वह व्यूपोर्ट में मौजूद हो. poster एट्रिब्यूट, <video> एलिमेंट को एक प्लेसहोल्डर देता है. वीडियो लोड होने के दौरान, यह प्लेसहोल्डर उस जगह पर दिखेगा.
ज़्यादातर ब्राउज़र में, preload डिफ़ॉल्ट रूप से metadata पर सेट होता है. साथ ही, Content-Range हेडर का इस्तेमाल करके वीडियो का कुछ हिस्सा पहले से लोड किया जाता है. इस वजह से, ज़रूरत से ज़्यादा डेटा डाउनलोड हो सकता है. ब्राउज़र को यह नहीं पता होता कि मेटाडेटा किस बाइट पर सेव है. साथ ही, ऐसा भी हो सकता है कि मेटाडेटा फ़ाइल की शुरुआत में सेव न हो. इसलिए, वीडियो को लोड होने से रोकने के लिए, preload="none" का इस्तेमाल करना सबसे सही तरीका है.
इसे और बेहतर बनाया जा सकता है, ताकि जब उपयोगकर्ता onmouseenter एट्रिब्यूट (या इसके बराबर mouseenter इवेंट हैंडलर) वाले वीडियो पर कर्सर घुमाए, तो मेटाडेटा पहले से लोड हो जाए:
<video controls
loading="lazy"
preload="none"
poster="one-does-not-simply-placeholder.jpg"
onmouseenter="event.target.setAttribute('preload','metadata')">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
इससे, उपयोगकर्ता को वीडियो चलाने में कम समय लगता है. साथ ही, वीडियो की अवधि भी तुरंत दिख जाती है.
वीडियो, एलसीपी कैंडिडेट के तौर पर शामिल किए जा सकते हैं. poster इमेज, वीडियो की तुलना में तेज़ी से लोड होगी. इसलिए, अगर यह एलसीपी कैंडिडेट है, तो आपको पोस्टर इमेज का इस्तेमाल करना चाहिए. हालांकि, आपको fetchpriority एट्रिब्यूट की वैल्यू "high" के साथ इसे प्रीलोड भी करना चाहिए. ऐसा इसलिए, क्योंकि लिखते समय, पोस्टर एट्रिब्यूट के लिए fetchpriority तय नहीं किया जा सकता:
<link rel="preload" href="one-does-not-simply-placeholder.jpg" as="image" fetchpriority="high">
<video controls preload="none"
poster="one-does-not-simply-placeholder.jpg"
onmouseenter="event.target.setAttribute('preload','metadata')">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
एलसीपी एलिमेंट के तौर पर इस्तेमाल किए जाने वाले वीडियो में loading="lazy" का इस्तेमाल नहीं किया जाना चाहिए. ठीक उसी तरह जिस तरह एलसीपी इमेज वाले वीडियो को लेज़ी लोड नहीं किया जाना चाहिए .
ऐनिमेटेड GIF की जगह वीडियो का इस्तेमाल करने के लिए
अपने-आप चलने वाले वीडियो का इस्तेमाल, आम तौर पर GIF स्टाइल वाले क्विक ऐनिमेशन के लिए किया जाता है. ऐनिमेटेड GIF का इस्तेमाल बड़े पैमाने पर किया जाता है. हालांकि, ये कई मामलों में वीडियो के मुकाबले कम बेहतर होते हैं. खास तौर पर, फ़ाइल साइज़ के मामले में. ऐनिमेटेड GIF का साइज़ कई मेगाबाइट तक हो सकता है. एक जैसी विज़ुअल क्वालिटी वाले वीडियो का साइज़ काफ़ी छोटा होता है.
ऐनिमेशन वाले GIF की जगह <video> एलिमेंट का इस्तेमाल करना, <img> एलिमेंट के मुकाबले ज़्यादा मुश्किल है. ऐनिमेटेड GIF की तीन विशेषताएं होती हैं:
- लोड होने पर, ये अपने-आप चलने लगते हैं.
- ये लगातार लूप होते रहते हैं (हालांकि, ऐसा हमेशा नहीं होता है).
- इनमें कोई ऑडियो ट्रैक नहीं होता.
<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>
loading="lazy" एट्रिब्यूट, वीडियो को व्यूपोर्ट के पास तक लोड होने से रोकता है. autoplay, muted, और loop एट्रिब्यूट के नाम से ही पता चलता है कि इनकी वैल्यू क्या होनी चाहिए. playsinline, iOS में वीडियो अपने-आप चलने की सुविधा के लिए ज़रूरी है.
अब आपके पास वीडियो को GIF के तौर पर बदलने का विकल्प है. यह सुविधा सभी प्लैटफ़ॉर्म पर काम करती है. लेकिन, इसे लेज़ी लोड कैसे किया जाए?
इस सुविधा के साथ काम करने वाले ब्राउज़र के लिए, loading="lazy" सबसे आसान विकल्प है:
<video loading="lazy" 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>
अन्य ब्राउज़र में वीडियो को लेज़ी-लोड करने के लिए, आपको JavaScript का इस्तेमाल करना होगा. साथ ही, अपने <video> मार्कअप में इसके मुताबिक बदलाव करना होगा:
<video class="lazy" preload="none" controls muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
आपको autoplay एट्रिब्यूट हटा हुआ दिखेगा. साथ ही, class="lazy", preload="none", और poster एट्रिब्यूट जोड़े गए दिखेंगे. इनकी मदद से, <video> एलिमेंट की जगह पर प्लेसहोल्डर तय किया जा सकता है. यह तब तक दिखेगा, जब तक वीडियो लेज़ी लोड नहीं हो जाता. इसके बाद, हम 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) {
video.target.removeAttribute('preload');
video.target.removeAttribute('controls');
video.target.autoplay = true;
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
इस तरीके का इस्तेमाल करने पर, वीडियो डिफ़ॉल्ट रूप से अपने-आप नहीं चलता. यह सिर्फ़ तब चलता है, जब इंटरसेक्शन ऑब्ज़र्वर को पता चलता है कि वीडियो व्यूपोर्ट में आ गया है. इसके अलावा, controls एट्रिब्यूट उन मामलों को हैंडल करता है जब JavaScript काम नहीं करती है. इन दोनों फ़ॉर्मैट को एक साथ इस्तेमाल करने से, आपको एक ऐसा वीडियो फ़ॉर्मैट मिलता है जो ऐनिमेटेड GIF की तरह काम करता है. हालांकि, इसमें ऐनिमेटेड GIF की तरह ज़्यादा डेटा इस्तेमाल नहीं होता. साथ ही, इस कॉन्टेंट को लेज़ी-लोड किया जा सकता है.
लेज़ी लोडिंग लाइब्रेरी
वीडियो को लेज़ी-लोड करने के लिए, इन लाइब्रेरी का इस्तेमाल किया जा सकता है:
- vanilla-lazyload और lozad.js बहुत हल्के विकल्प हैं. ये सिर्फ़ इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल करते हैं. इसलिए, ये बहुत अच्छा परफ़ॉर्म करते हैं. हालांकि, पुराने ब्राउज़र पर इनका इस्तेमाल करने से पहले, आपको इन्हें पॉलीफ़िल करना होगा.
- अगर आपको React के लिए लेज़ी लोडिंग लाइब्रेरी की ज़रूरत है, तो react-lazyload का इस्तेमाल किया जा सकता है. हालांकि, यह Intersection Observer का इस्तेमाल नहीं करता है, लेकिन यह React की मदद से ऐप्लिकेशन डेवलप करने वाले लोगों के लिए, इमेज को लेज़ी लोड करने का जाना-पहचाना तरीका ज़रूर उपलब्ध कराता है.
इनमें से हर लेज़ी लोडिंग लाइब्रेरी के बारे में अच्छी तरह से बताया गया है. साथ ही, लेज़ी लोडिंग के अलग-अलग कामों के लिए, कई मार्कअप पैटर्न दिए गए हैं.
<video> के लिए loading एट्रिब्यूट ज़्यादा ब्राउज़र में उपलब्ध होने पर, हम उम्मीद करते हैं कि JavaScript के समाधानों (लाइब्रेरी भी शामिल हैं) का इस्तेमाल कम किया जाएगा. इसके बजाय, बिल्ट-इन समाधानों का इस्तेमाल किया जाएगा. हालांकि, ऐसा उन लोगों के लिए नहीं होगा जो ज़्यादा कंट्रोल चाहते हैं.