في هذا الدرس التطبيقي، ستتعرّف على كيفية تعديل المحتوى استنادًا إلى جودة الشبكة. لن يتم تحميل الفيديو الذي يظهر في الخلفية في هذه الصفحة إلا عندما يكون المستخدمون متصلين بشبكة سريعة. في الشبكات البطيئة، سيتم تحميل صورة بدلاً من الفيديو.
تتيح لك واجهة برمجة التطبيقات
Network Information API
الوصول إلى معلومات عن جودة اتصال المستخدم. ستستخدم السمة effectiveType
لتحديد وقت عرض الفيديو ومتى تريد عرض صورة. يمكن أن يكون effectiveType
'slow-2g'
أو '2g'
أو '3g'
أو '4g'
.
الخطوة 1: التحقّق من نوع الاتصال
يحتوي ملف index.html
على علامة <video>
لعرض الفيديو في الخلفية (السطر 22). يعمل الرمز البرمجي في script.js
على تحميل الفيديو من خلال ضبط سمة src
لعلامة الفيديو. (يتم وصف رمز تحميل الفيديو بمزيد من التفصيل في الخطوة 2).
لتحميل الفيديو بشكل مشروط، تأكَّد أولاً من توفّر Network Information API. وفي حال توفّرها، تحقَّق من نوع الاتصال.
- في
script.js
، أضِف عبارةif
تختبر ما إذا كان عنصرnavigator.connection
متوفّرًا وما إذا كان يتضمّن السمةeffectiveType
. - يُرجى إضافة عبارة
if
للتحقّق منeffectiveType
للشبكة.
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');
}
الخطوة 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
(بعد عنصر الفيديو مباشرةً)، واستخدِم
السمة data-src
بدلاً من السمة 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');
}
جرّبه الآن
لاختبار هذه الميزة بنفسك:
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة .
- اضغط على Ctrl + Shift + J (أو Command + Option + J على نظام التشغيل Mac) لفتح DevTools.
- انقر على علامة التبويب الشبكة.
- انقر على القائمة المنسدلة تقييد السرعة، والتي تكون مضبوطة على بدون تقييد السرعة تلقائيًا. اختَر شبكة الجيل الثالث السريعة.
أعِد الآن تحميل الصفحة مع إبقاء شبكة الجيل الثالث السريعة مفعّلة. يُحمِّل التطبيق صورة في الخلفية بدلاً من الفيديو:
النقاط الإضافية: الردّ على التغييرات
هل تذكر أنّ واجهة برمجة التطبيقات هذه تتضمّن 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.
لاختبارها مرة أخرى:
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة .
- اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".
- انقر على علامة التبويب الشبكة.
- انقر على القائمة المنسدلة تقييد السرعة، والتي تكون مضبوطة على بدون تقييد السرعة تلقائيًا. اختَر شبكة الجيل الثالث السريعة.
- أعِد تحميل التطبيق.
سيعدّل التطبيق معلومات الشبكة إلى 3g: