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

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

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', משתמשים בקוד לטעינת הסרטון שמופיע בתחילת ה-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 (ויסות נתונים). כברירת מחדל, האפשרות שמוגדרת בתפריט היא No 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;NETWORK INFORMATION 3g&#39;