התאמת וידאו להצגת תמונות בהתאם לאיכות הרשת

בשיעור ה-Codelab הזה תלמדו איך להתאים את התוכן שלכם בהתאם לאיכות הרשת. סרטון הרקע בדף הזה ייטען רק כשהמשתמשים נמצאים ברשת מהירה. ברשתות איטיות יותר, במקום הסרטון ייטען קובץ תמונה.

Network Information API מאפשר לגשת למידע על איכות החיבור של המשתמש. תוכלו להשתמש במאפיין effectiveType כדי להחליט מתי להציג סרטון ומתי להציג תמונה. effectiveType יכול להיות 'slow-2g', '2g', '3g' או '4g'.

תמיכה בדפדפנים

  • Chrome:‏ 61.
  • קצה: 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', משתמשים בקוד לטעינת הסרטון שמופיע בתחילת ה-Codelab.

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. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
  3. לוחצים על הכרטיסייה רשתות.
  4. לוחצים על התפריט הנפתח Throttling, שמוגדר כברירת מחדל לללא ויסות נתונים. בוחרים באפשרות 3G מהיר.

הכרטיסייה &#39;רשת&#39; בכלי הפיתוח, עם הדגשה של האפשרות &#39;ויסות נתונים (throttle) מהיר ב-3G&#39;

עכשיו טוענים מחדש את הדף כשהאפשרות '3G מהיר' עדיין מופעלת. האפליקציה טוענת תמונה ברקע במקום את הסרטון:

רקע תמונה דמוי מטריצה עם שכבת-על של טקסט &#39;פרטי רשת&#39;

נקודה נוספת: תגובה לשינויים

זכור לכם של-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.

רקע של סרטון בסגנון מטריקס עם שכבת-על של הטקסט &#39;NETWORK INFORMATION 4g&#39;

כדי לבדוק שוב:

  1. כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא מסך מלא.
  2. מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
  3. לוחצים על הכרטיסייה רשתות.
  4. לוחצים על התפריט הנפתח Throttling (ויסות נתונים). כברירת מחדל, האפשרות שמוגדרת בתפריט היא No throttling (ללא ויסות נתונים). בוחרים באפשרות 3G מהיר.
  5. טוענים מחדש את האפליקציה.

האפליקציה תעדכן את פרטי הרשת ל-3g:

רקע סרטון דמוי מטריצה עם שכבת-על של טקסט &#39;פרטי רשת 3g&#39;