ویدئو را با ارائه تصویر بر اساس کیفیت شبکه تطبیق دهید

میلیکا میهاجلیا

در این کد لبه، یاد خواهید گرفت که چگونه محتوای خود را بر اساس کیفیت شبکه تطبیق دهید. ویدیوی پس‌زمینه این صفحه تنها زمانی بارگیری می‌شود که کاربران در یک شبکه سریع باشند. در شبکه‌های کندتر، یک تصویر بارگیری می‌شود.

Network Information API شما را قادر می سازد به اطلاعات مربوط به کیفیت اتصال کاربر دسترسی داشته باشید. شما از ویژگی effectiveType آن برای تصمیم گیری در مورد زمان پخش یک ویدیو و زمان نمایش یک تصویر استفاده خواهید کرد. effectiveType می تواند 'slow-2g' ، '2g' ، '3g' یا '4g' باشد.

پشتیبانی مرورگر

  • 61
  • 79
  • ایکس
  • ایکس

منبع

مرحله 1: نوع اتصال را بررسی کنید

فایل index.html حاوی یک تگ <video> برای نمایش ویدیوی پس زمینه است (خط 22). کد موجود در script.js ویدیو را با تنظیم ویژگی src تگ ویدیو بارگیری می کند. (کد بارگذاری ویدیو با جزئیات بیشتر در مرحله 2 توضیح داده شده است.)

برای بارگیری مشروط ویدیو، ابتدا بررسی کنید که آیا API اطلاعات شبکه موجود است یا خیر. اگر هست، نوع اتصال را بررسی کنید.

  1. در script.js ، یک دستور if اضافه کنید که بررسی کند آیا شیء navigator.connection وجود دارد و آیا خاصیت effectiveType را دارد یا خیر.
  2. برای بررسی 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" 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');
}

آن را امتحان کنید

برای اینکه خودتان آن را آزمایش کنید:

  1. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .
  2. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  3. روی تب Network کلیک کنید.
  4. روی منوی کشویی Throttling کلیک کنید که به طور پیش فرض روی No throttling تنظیم شده است. Fast 3G را انتخاب کنید.

برگه DevTools Network با گزینه Fast 3G throttling برجسته شده است

اکنون صفحه را با فعال بودن 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 است.

پس‌زمینه ویدیویی ماتریسی‌مانند با پوشش متنی «اطلاعات شبکه 4g».

برای تست مجدد:

  1. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .
  2. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  3. روی تب Network کلیک کنید.
  4. روی منوی کشویی Throttling کلیک کنید که به طور پیش فرض روی No throttling تنظیم شده است. Fast 3G را انتخاب کنید.
  5. برنامه را دوباره بارگیری کنید.

این برنامه اطلاعات شبکه را به 3g به روز می کند:

پس‌زمینه ویدیویی ماتریس‌مانند با پوشش متنی «اطلاعات شبکه 3g».