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

מיליקה מיהאג'ליג'ה

כדי לבצע את ה-Codelab הזה, פותחים את הגליץ' הזה בכרטיסייה שנייה.

הערה: ה-Codelab הזה משתמש בכלי הפיתוח ל-Chrome. מורידים את Chrome אם עוד לא התקנתם אותו.

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

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

תמיכה בדפדפן

• 61
• 79
• x
• x

מקור

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

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

זיכוי נוסף: תגובה לשינויים

זוכרים איך ה-API הזה כולל onchange האזנה לאירועים? אפשר להשתמש בה למטרות רבות: התאמה דינמית של תוכן, כמו איכות הווידאו, הפעלה מחדש של העברות נתונים שנדחו כאשר מזוהה שינוי בסוג רשת בעל רוחב פס גבוה או הודעה למשתמשים כשאיכות הרשת משתנה.

הנה דוגמה פשוטה לאופן השימוש ב-listener הזה. הוספה אל 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. כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
2. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
3. לוחצים על הכרטיסייה רשתות.
4. לוחצים על התפריט הנפתח ויסות נתונים, שמוגדר כברירת מחדל כללא ויסות נתונים. בוחרים באפשרות Fast 3G.
5. טוענים מחדש את האפליקציה.

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