טעינה מדורגת של סרטון

Jeremy Wagner

Rachel Andrew

בדומה לרכיבי תמונה, אפשר גם לבצע טעינה מדורגת של סרטונים. סרטונים נטענים בדרך כלל עם הרכיב <video> (למרות ש שיטה חלופית שמשתמשת ל-<img> יש מוצר שפעל עם הטמעה מוגבלת). האופן שבו לבצע טעינה מדורגת של <video> תלוי אבל בתרחיש לדוגמה בפועל. בואו נדבר על שני תרחישים שכל אחד מהם מחייב הוא פתרון אחר.

בסרטון שלא מופעל באופן אוטומטי

בסרטונים שבהם המשתמש הפעיל את ההפעלה (כלומר סרטונים שלא אוטומטי), שמציין את preload מאפיין ברכיב <video> יכול להיות רצוי:

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

נקודה חשובה: סרטון poster יכול להיחשב כמועמדים של LCP. אם התמונה של poster עומדת בדרישות של LCP, צריך לטעון אותה מראש עם ערך המאפיין fetchpriority של "high" כדי שהמשתמש יראה אותה בהקדם האפשרי.

הדוגמה שלמעלה משתמשת במאפיין preload עם הערך none כדי למנוע דפדפנים מטעינה מראש של כל נתוני וידאו. poster נותן לרכיב <video> placeholder שיחליף את המרחב המשותף בזמן שהסרטון נטען. הסיבה לכך היא שפונקציות ברירת המחדל לטעינת סרטונים יכולות להשתנות מדפדפן לדפדפן:

• ב-Chrome, ברירת המחדל של preload הייתה auto, אבל ב-Chrome 64 היא עכשיו ברירת המחדל היא metadata. למרות זאת, בגרסת Chrome למחשב שולחני, חלק יכול להיות שהסרטון ייטען מראש באמצעות הכותרת Content-Range. דפדפנים אחרים המבוססים על Chromium ו-Firefox מתנהגים באופן דומה.
• כמו ב-Chrome במחשב, גם 11.0 גרסאות למחשב של Safari יטען מראש טווח של הסרטון. מגרסה 11.2, רק המטא-נתונים של הסרטון נטענים מראש. ב-Safari ב-iOS, סרטונים אף פעם לא נטענו מראש.
• כאשר מצב חוסך הנתונים (Data Saver) הוא מופעל, preload ברירת המחדל היא none.

מכיוון שהתנהגויות ברירת המחדל של הדפדפן ביחס ל-preload לא מוגדרות באופן אבן, להיות בוטה הוא כנראה ההימור הטוב ביותר. במקרים שבהם המשתמש יוזם הפעלה, שימוש ב-preload="none" הוא הדרך הקלה ביותר לדחות טעינת סרטון על כל הפלטפורמות. המאפיין preload הוא לא הדרך היחידה לדחות את הטעינה של תוכן וידאו. הפעלה מהירה עם וידאו טעינה מראש עשויה לתת לכם רעיונות לעבודה עם הפעלת סרטונים ב-JavaScript.

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

לסרטון שמשמש כתחליף לקובץ GIF מונפש

קובצי GIF מונפשים נהנים משימוש נרחב, אבל הם דומים לאלה של תוכני וידאו דומים כמה דרכים, במיוחד בגודל הקובץ. קובצי GIF מונפשים יכולים לכלול טווח של כמה מגה-בייט של נתונים. סרטונים באיכות ויזואלית דומה בדרך כלל להיות קטנות הרבה יותר.

השימוש ברכיב <video> כתחליף לקובץ GIF מונפש אינו זהה ישר כמו הרכיב <img>. לקובצי GIF מונפשים יש שלושה מאפיינים:

1. הם יופעלו באופן אוטומטי כשהם ייטענו.
2. הם חוזרים בלולאה (למרות שלא תמיד זה מקרה לדוגמה).
3. אין בהם טראק של אודיו.

השגת זאת באמצעות הרכיב <video> נראית בערך כך:

<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

המאפיינים autoplay, muted ו-loop לא מובן מאליו. יש צורך ב-playsinline כדי שההפעלה האוטומטית תתבצע ב- iOS. עכשיו יש לך החלפה של מודעת וידאו כ-GIF שיכולה לפעול בכל הפלטפורמות. אבל איך עושים את זה לגבי טעינה מדורגת? כדי להתחיל, צריך לשנות את תגי העיצוב של <video> בהתאם:

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

אפשר לראות את ההוספה של poster המאפיין, שמאפשר לציין placeholder שיתפוס את השטח של הרכיב <video> עד שהסרטון נטען באופן מדורג. כמו בדוגמאות של <img> לטעינה מדורגת, להסתיר את כתובת ה-URL של הסרטון במאפיין data-src בכל <source> לרכיב מסוים. משם, משתמשים בקוד JavaScript שדומה דוגמאות לטעינה מדורגת של תמונה שמבוססת על צומת תמונות:

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

כשטוענים רכיב <video> באופן הדרגתי, צריך לחזור על כל רכיבי הצאצא רכיבי <source> והופכים את מאפייני data-src שלהם למאפייני src. פעם אחת ועשיתם את זה, עליכם להפעיל את הטעינה של הסרטון על ידי קריאה השיטה load של הרכיב, ואחר כך המדיה תתחיל לפעול באופן אוטומטי. בהתאם למאפיין autoplay.

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

ספריות בטעינה מדורגת

הספריות הבאות יכולות לעזור לכם לבצע טעינה מדורגת של סרטונים:

• vanilla-lazyload וגם lozad.js הן אפשרויות קלות במיוחד שמשתמשים רק ב-Intersection Observer. לכן, יש להם ביצועים גבוהים, יהיה צורך למלא פוליגונים כדי להשתמש בהם בדפדפנים ישנים יותר.
• yall.js הוא ספרייה שמשתמשת צופה צומת ונופל חזרה לגורמים שמטפלים באירועים. אפשר גם לטעון תמונות של סרטון poster באופן הדרגתי באמצעות המאפיין data-poster.
• אם אתם צריכים ספרייה של טעינה מדורגת ספציפית ל-React, כדאי לבדוק react-lazyload. אומנם לא משתמש ב-Intersection Observer, הוא מספק שיטה מוכרת של עצלנים וטוענים תמונות בשביל אלו שרגילים לפיתוח אפליקציות באמצעות React.

כל אחת מספריות הטעינה העצמית האלה מתועדת היטב, עם הרבה תגי עיצוב שמתאימים למאמצים השונים של טעינה מדורגת.