در این کد لبه، یاد خواهید گرفت که چگونه محتوای خود را بر اساس کیفیت شبکه تطبیق دهید. ویدیوی پسزمینه این صفحه تنها زمانی بارگیری میشود که کاربران در یک شبکه سریع باشند. در شبکههای کندتر، یک تصویر بارگیری میشود.
Network Information API شما را قادر می سازد به اطلاعات مربوط به کیفیت اتصال کاربر دسترسی داشته باشید. شما از ویژگی effectiveType
آن برای تصمیم گیری در مورد زمان پخش یک ویدیو و زمان نمایش یک تصویر استفاده خواهید کرد. effectiveType
می تواند 'slow-2g'
، '2g'
، '3g'
یا '4g'
باشد.
مرحله 1: نوع اتصال را بررسی کنید
فایل index.html
حاوی یک تگ <video>
برای نمایش ویدیوی پس زمینه است (خط 22). کد موجود در script.js
ویدیو را با تنظیم ویژگی src
تگ ویدیو بارگیری می کند. (کد بارگذاری ویدیو با جزئیات بیشتر در مرحله 2 توضیح داده شده است.)
برای بارگیری مشروط ویدیو، ابتدا بررسی کنید که آیا 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
بپیچید تا ویدیو همچنان در مرورگرهایی بارگیری شود که از 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');
}
مرحله 2: بارگیری ویدیو
اگر 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
آن تنظیم نشده است. URL ویدیو برای بارگیری با استفاده از ویژگی 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>
ویژگی های داده به شما امکان می دهد اطلاعات اضافی را روی عناصر استاندارد HTML ذخیره کنید. یک عنصر داده را می توان هر چیزی نامید، به شرطی که با "data-" شروع شود.
برای نمایش واقعی ویدیو در صفحه، باید مقدار را از data-src
دریافت کنید و آن را به عنوان ویژگی src
عنصر ویدیو تنظیم کنید.
ابتدا عنصر DOM را دریافت کنید که حاوی دارایی است:
const video = document.getElementById('coverVideo');
سپس مکان منبع را از ویژگی data-src
دریافت کنید:
const videoSource = video.getAttribute('data-src');
و در نهایت آن را به عنوان ویژگی src
عنصر ویدیو تنظیم کنید:
video.setAttribute('src', videoSource);
خط آخر به موقعیت یابی CSS می پردازد:
video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
مرحله 3: تصویر را بارگیری کنید
برای بارگذاری مشروط یک تصویر در شبکههای کندتر، از همان استراتژی ویدیو استفاده کنید.
یک عنصر تصویر را به 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
، کدی را اضافه کنید تا ویژگی src
تصویر را بسته به effectiveType
شبکه تنظیم کنید.
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');
}
آن را امتحان کنید
برای اینکه خودتان آن را آزمایش کنید:
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
- «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
- روی تب Network کلیک کنید.
- روی منوی کشویی Throttling کلیک کنید که به طور پیش فرض روی No throttling تنظیم شده است. Fast 3G را انتخاب کنید.
اکنون صفحه را با فعال بودن Fast 3G مجدداً بارگیری کنید. این برنامه به جای ویدیو، یک تصویر را در پسزمینه بارگذاری میکند:
اعتبار اضافی: به تغییرات پاسخ دهید
به یاد دارید که چگونه این API یک شنونده رویداد onchange
دارد؟ شما می توانید از آن برای بسیاری از موارد استفاده کنید: تطبیق پویا محتوا مانند کیفیت ویدیو. راهاندازی مجدد انتقال دادههای معوق زمانی که تغییری در نوع شبکه با پهنای باند بالا شناسایی شد. یا اطلاع دادن به کاربران در صورت تغییر کیفیت شبکه.
در اینجا یک مثال ساده از نحوه استفاده از این شنونده آورده شده است. آن را به script.js
اضافه کنید. هر زمان که اطلاعات شبکه تغییر کند، این کد تابع displayNetworkInfo
را فراخوانی می کند.
navigator.connection.addEventListener('change', displayNetworkInfo);
در حال حاضر یک عنصر <h2>
خالی در صفحه index.html
وجود دارد. حالا تابع displayNetworkInfo
را طوری تعریف کنید که اطلاعات شبکه را در عنصر <h2>
نمایش دهد و تابع را فراخوانی کند.
function displayNetworkInfo() {
document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}
displayNetworkInfo();
در اینجا وضعیت نهایی برنامه در Glitch است.
برای تست مجدد:
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
- «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
- روی تب Network کلیک کنید.
- روی منوی کشویی Throttling کلیک کنید که به طور پیش فرض روی No throttling تنظیم شده است. Fast 3G را انتخاب کنید.
- بارگیری مجدد برنامه
این برنامه اطلاعات شبکه را به 3g به روز می کند: