इस कोडलैब में, आपको नेटवर्क की क्वालिटी के आधार पर अपने कॉन्टेंट को अडैप्ट करने का तरीका पता चलेगा. इस पेज का बैकग्राउंड वीडियो सिर्फ़ तब लोड होगा, जब उपयोगकर्ताओं के पास तेज़ इंटरनेट होगा. धीमे नेटवर्क पर, वीडियो के बजाय इमेज लोड होगी.
नेटवर्क इन्फ़ॉर्मेशन एपीआई की मदद से, उपयोगकर्ता के कनेक्शन की क्वालिटी की जानकारी ऐक्सेस की जा सकती है. आपको effectiveType
प्रॉपर्टी का इस्तेमाल करके यह तय करना होगा कि वीडियो कब दिखाया जाए और इमेज कब दिखाई जाए. effectiveType
, 'slow-2g'
, '2g'
, '3g'
या '4g'
हो सकता है.
पहला चरण: कनेक्शन का टाइप देखना
index.html
फ़ाइल में बैकग्राउंड वीडियो दिखाने के लिए, <video>
टैग मौजूद है (लाइन 22). script.js
में मौजूद कोड, वीडियो टैग के src
एट्रिब्यूट को सेट करके वीडियो लोड करता है. (वीडियो लोड करने वाले कोड के बारे में ज़्यादा जानकारी दूसरे चरण में दी गई है.)
वीडियो को शर्तों के हिसाब से लोड करने के लिए, पहले देखें कि Network Information API उपलब्ध है या नहीं. अगर उपलब्ध है, तो कनेक्शन टाइप देखें.
script.js
में,if
स्टेटमेंट जोड़ें. इससे यह पता चलता है किnavigator.connection
ऑब्जेक्ट मौजूद है या नहीं. साथ ही, यह भी पता चलता है कि उसमेंeffectiveType
प्रॉपर्टी है या नहीं.- नेटवर्क का
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');
}
इसे आज़माएं
इसे खुद टेस्ट करने के लिए:
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
- DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
- नेटवर्क टैब पर क्लिक करें.
- ट्रैफ़िक कम करना ड्रॉप-डाउन पर क्लिक करें. यह डिफ़ॉल्ट रूप से ट्रैफ़िक कम नहीं किया जा रहा है पर सेट होता है. फ़ास्ट 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 पर मौजूद ऐप्लिकेशन की आखिरी स्थिति यहां दी गई है.
इसे फिर से टेस्ट करने के लिए:
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- नेटवर्क टैब पर क्लिक करें.
- थ्रॉटलिंग ड्रॉप-डाउन पर क्लिक करें. यह डिफ़ॉल्ट रूप से, कोई थ्रॉटलिंग नहीं पर सेट होता है. फ़ास्ट 3G चुनें.
- ऐप्लिकेशन को फिर से लोड करें.
ऐप्लिकेशन, नेटवर्क की जानकारी को 3g में अपडेट कर देगा: