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

Milica Mihajlija

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

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

שלב 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 מהיר.

עכשיו טוענים מחדש את הדף כשהאפשרות '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.

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

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

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