नेटवर्क की क्वालिटी के आधार पर, वीडियो को इमेज के हिसाब से बनाएं

इस कोडलैब में, आपको नेटवर्क की क्वालिटी के आधार पर अपने कॉन्टेंट को अडैप्ट करने का तरीका पता चलेगा. इस पेज का बैकग्राउंड वीडियो सिर्फ़ तब लोड होगा, जब उपयोगकर्ताओं के पास तेज़ इंटरनेट होगा. धीमे नेटवर्क पर, वीडियो के बजाय इमेज लोड होगी.

नेटवर्क इन्फ़ॉर्मेशन एपीआई की मदद से, उपयोगकर्ता के कनेक्शन की क्वालिटी की जानकारी ऐक्सेस की जा सकती है. आपको effectiveType प्रॉपर्टी का इस्तेमाल करके यह तय करना होगा कि वीडियो कब दिखाया जाए और इमेज कब दिखाई जाए. effectiveType, 'slow-2g', '2g', '3g' या '4g' हो सकता है.

ब्राउज़र सहायता

  • Chrome: 61.
  • Edge: 79.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: समर्थित नहीं.

सोर्स

पहला चरण: कनेक्शन का टाइप देखना

index.html फ़ाइल में बैकग्राउंड वीडियो दिखाने के लिए, <video> टैग मौजूद है (लाइन 22). script.js में मौजूद कोड, वीडियो टैग के src एट्रिब्यूट को सेट करके वीडियो लोड करता है. (वीडियो लोड करने वाले कोड के बारे में ज़्यादा जानकारी दूसरे चरण में दी गई है.)

वीडियो को शर्तों के हिसाब से लोड करने के लिए, पहले देखें कि Network Information API उपलब्ध है या नहीं. अगर उपलब्ध है, तो कनेक्शन टाइप देखें.

  1. script.js में, if स्टेटमेंट जोड़ें. इससे यह पता चलता है कि navigator.connection ऑब्जेक्ट मौजूद है या नहीं. साथ ही, यह भी पता चलता है कि उसमें effectiveType प्रॉपर्टी है या नहीं.
  2. नेटवर्क का effectiveType देखने के लिए, if स्टेटमेंट जोड़ें.
if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // Only load video on the fastest connections.
  } else {
    // In any other case load the image.
  }
}

वीडियो लोड करने के मौजूदा कोड को else स्टेटमेंट में रैप करें, ताकि वीडियो उन ब्राउज़र में भी लोड हो सके जो नेटवर्क इन्फ़ॉर्मेशन एपीआई के साथ काम नहीं करते.

if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // video loading code
  } else {
    // image loading code
  }
} else {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

दूसरा चरण: वीडियो लोड करना

अगर effectiveType '4g' है, तो कोडलैब की शुरुआत से वीडियो लोड करने वाले कोड का इस्तेमाल करें.

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);
  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  // image loading code
}

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

<video id="coverVideo" playsinline autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>

डेटा एट्रिब्यूट की मदद से, स्टैंडर्ड एचटीएमएल एलिमेंट में ज़्यादा जानकारी सेव की जा सकती है. डेटा एलिमेंट का नाम कुछ भी हो सकता है. हालांकि, यह ज़रूरी है कि उसका नाम "data-" से शुरू हो.

वीडियो को पेज पर दिखाने के लिए, आपको data-src से वैल्यू लेनी होगी और उसे वीडियो एलिमेंट के src एट्रिब्यूट के तौर पर सेट करना होगा.

सबसे पहले, वह डीओएम एलिमेंट पाएं जिसमें यह ऐसेट है:

const video = document.getElementById('coverVideo');

इसके बाद, data-src एट्रिब्यूट से संसाधन की जगह की जानकारी पाएं:

const videoSource = video.getAttribute('data-src');

आखिर में, इसे वीडियो एलिमेंट के src एट्रिब्यूट के तौर पर सेट करें:

video.setAttribute('src', videoSource);

आखिरी लाइन, सीएसएस की पोज़िशनिंग का ध्यान रखती है:

video.setAttribute('style', 'height: 100%; width: 100%; display:inline');

तीसरा चरण: इमेज लोड करना

धीमे नेटवर्क पर इमेज को शर्त के हिसाब से लोड करने के लिए, वीडियो के लिए इस्तेमाल की गई उसी रणनीति का इस्तेमाल करें.

index.html में कोई इमेज एलिमेंट जोड़ें (वीडियो एलिमेंट के ठीक बाद), और src एट्रिब्यूट के बजाय data-src एट्रिब्यूट का इस्तेमाल करें.

<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />

script.js में, नेटवर्क के effectiveType के आधार पर इमेज का src एट्रिब्यूट सेट करने के लिए कोड जोड़ें.

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  const image = document.getElementById('coverImage');
  const imageSource = image.getAttribute('data-src');
  image.setAttribute('src', imageSource);

  image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

इसे आज़माएं

इसे खुद टेस्ट करने के लिए:

  1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन दबाएं.
  2. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
  3. नेटवर्क टैब पर क्लिक करें.
  4. ट्रैफ़िक कम करना ड्रॉप-डाउन पर क्लिक करें. यह डिफ़ॉल्ट रूप से ट्रैफ़िक कम नहीं किया जा रहा है पर सेट होता है. फ़ास्ट 3G चुनें.

DevTools नेटवर्क टैब, जिसमें फ़ास्ट 3G थ्रॉटलिंग के विकल्प को हाइलाइट किया गया है

अब पेज को फिर से लोड करें. इस दौरान, तेज़ 3G थ्रॉटलिंग की सुविधा चालू रखें. ऐप्लिकेशन, वीडियो के बजाय बैकग्राउंड में इमेज लोड करता है:

&#39;नेटवर्क जानकारी&#39; टेक्स्ट ओवरले के साथ मैट्रिक्स जैसी इमेज वाला बैकग्राउंड

ज़्यादा क्रेडिट: बदलावों का जवाब देना

याद रखें कि इस एपीआई में onchange इवेंट लिसनर कैसे है? इसका इस्तेमाल कई कामों के लिए किया जा सकता है: वीडियो क्वालिटी जैसे कॉन्टेंट को डाइनैमिक तौर पर अडैप्ट करना; हाई-बैंडविड्थ वाले नेटवर्क टाइप में बदलाव का पता चलने पर, डेटा ट्रांसफ़र को फिर से शुरू करना या नेटवर्क क्वालिटी में बदलाव होने पर, उपयोगकर्ताओं को सूचना देना.

इस लिसनर का इस्तेमाल करने का एक आसान उदाहरण यहां दिया गया है. इसे script.js में जोड़ें. जब भी नेटवर्क की जानकारी में बदलाव होगा, तब यह कोड displayNetworkInfo फ़ंक्शन को कॉल करेगा.

navigator.connection.addEventListener('change', displayNetworkInfo);

index.html पेज पर पहले से ही एक खाली <h2> एलिमेंट मौजूद है. अब displayNetworkInfo फ़ंक्शन तय करें, ताकि यह <h2> एलिमेंट में नेटवर्क की जानकारी दिखा सके और फ़ंक्शन को शुरू कर सके.

function displayNetworkInfo() {
  document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}

displayNetworkInfo();

Glitch पर मौजूद ऐप्लिकेशन की आखिरी स्थिति यहां दी गई है.

मैट्रिक्स जैसे वीडियो बैकग्राउंड के साथ &#39;नेटवर्क की जानकारी 4g&#39; टेक्स्ट ओवरले

इसे फिर से टेस्ट करने के लिए:

  1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीनफ़ुलस्क्रीन दबाएं.
  2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
  3. नेटवर्क टैब पर क्लिक करें.
  4. थ्रॉटलिंग ड्रॉप-डाउन पर क्लिक करें. यह डिफ़ॉल्ट रूप से, कोई थ्रॉटलिंग नहीं पर सेट होता है. फ़ास्ट 3G चुनें.
  5. ऐप्लिकेशन को फिर से लोड करें.

ऐप्लिकेशन, नेटवर्क की जानकारी को 3g में अपडेट कर देगा:

मैट्रिक्स जैसा वीडियो बैकग्राउंड, जिसमें &#39;नेटवर्क की जानकारी 3g&#39; टेक्स्ट ओवरले है