تكييف عرض الفيديو مع عرض الصور استنادًا إلى جودة الشبكة

في هذا الدرس التدريبي حول الرموز البرمجية، ستتعرّف على كيفية تكييف المحتوى الخاص بك استنادًا إلى جودة الشبكة. لن يتم تحميل فيديو الخلفية في هذه الصفحة إلا عندما يكون المستخدمون متصلين بشبكة سريعة. في الشبكات البطيئة، سيتم تحميل صورة بدلاً من الفيديو.

تتيح لك واجهة برمجة التطبيقات Network Information API الوصول إلى معلومات عن جودة اتصال المستخدم. ويمكنك استخدام سمة effectiveType لتحديد الحالات التي يتم فيها عرض فيديو والحالات التي يتم فيها عرض صورة. يمكن أن يكون effectiveType هو 'slow-2g' أو '2g' أو '3g' أو '4g'.

توافق المتصفّح

  • Chrome: 61
  • ‫Edge: 79
  • Firefox: غير متوافق
  • Safari: غير متوافق

المصدر

الخطوة 1: التحقّق من نوع الاتصال

يحتوي ملف index.html على علامة <video> لعرض الفيديو في الخلفية (السطر 22). يعمل الرمز البرمجي في script.js على تحميل الفيديو من خلال ضبط سمة src لعلامة الفيديو. (يتم وصف رمز تحميل الفيديو بمزيد من التفصيل في الخطوة 2).

لتحميل الفيديو بشكل مشروط، تحقّق أولاً ممّا إذا كانت Network Information API متاحة، وإذا كانت متاحة، تحقّق من نوع الاتصال.

  1. في script.js، أضِف عبارة if تختبر ما إذا كان العنصر navigator.connection متوفّرًا وما إذا كان يتضمّن السمة effectiveType.
  2. أضِف عبارة 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');
}

جرّبه الآن

لاختبار هذه الميزة بنفسك:

  1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة ملء الشاشة.
  2. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  3. انقر على علامة التبويب الشبكة.
  4. انقر على القائمة المنسدلة تقييد السرعة، والتي تكون مضبوطة على بدون تقييد السرعة تلقائيًا. اختَر شبكة الجيل الثالث السريعة.

علامة التبويب &quot;الشبكة&quot; في &quot;أدوات مطوّري البرامج&quot; مع تمييز خيار &quot;تقييد شبكة الجيل الثالث السريعة&quot;

أعِد الآن تحميل الصفحة مع إبقاء شبكة الجيل الثالث السريعة مفعّلة. يُحمِّل التطبيق صورة في الخلفية بدلاً من الفيديو:

خلفية صورة تشبه مصفوفة مع نص &quot;معلومات الشبكة&quot; متراكب

النقاط الإضافية: الردّ على التغييرات

هل تتذكر أنّ واجهة برمجة التطبيقات هذه تتضمّن 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.

خلفية فيديو تشبه مصفوفة مع نص &quot;معلومات الشبكة 4g&quot; معروض على سطح الفيديو

لاختبارها مرة أخرى:

  1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على ملء الشاشة ملء الشاشة.
  2. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  3. انقر على علامة التبويب الشبكة.
  4. انقر على القائمة المنسدلة تقييد السرعة، والتي تكون مضبوطة على بدون تقييد السرعة تلقائيًا. اختَر شبكة الجيل الثالث السريعة.
  5. أعِد تحميل التطبيق.

سيعدّل التطبيق معلومات الشبكة إلى 3g:

خلفية فيديو تشبه مصفوفة مع نص &quot;معلومات الشبكة 3g&quot; معروض على سطح الفيديو