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

मिलिका मिहाजलिया

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

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

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

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

वीडियो को किसी शर्त के साथ लोड करने के लिए, पहले जांच लें कि 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 स्टेटमेंट में रैप करें, ताकि वीडियो उन ब्राउज़र पर भी लोड होता रहे जो Network Information API के साथ काम नहीं करते.

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" 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 एट्रिब्यूट के तौर पर सेट करना होगा.

सबसे पहले, वह DOM एलिमेंट पाएं जिसमें एसेट शामिल हो:

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 चुनें.

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

अतिरिक्त क्रेडिट: बदलावों पर कार्रवाई करें

क्या आपको याद है कि इस एपीआई में 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 पर ऐप्लिकेशन की आखिरी स्थिति.

इसकी फिर से जांच करने के लिए:

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

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