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

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

تتيح لك واجهة برمجة التطبيقات 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. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".
  3. انقر على علامة التبويب الشبكة.
  4. انقر على القائمة المنسدلة تقييد السرعة، والتي تكون مضبوطة على بدون تقييد السرعة تلقائيًا. اختَر شبكة الجيل الثالث السريعة.
  5. أعِد تحميل التطبيق.

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

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