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

ג'רמי וגנר

רייצ'ל אנדרו

בדומה לרכיבי תמונה, אפשר גם לבצע טעינה מדורגת של סרטון. בדרך כלל, סרטונים נטענים עם האלמנט <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>

בדוגמה שלמעלה השתמשנו במאפיין 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 מונפשים, במיוחד בגודל הקובץ. קובצי 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 שדומה לדוגמאות לטעינה מדורגת של תמונות המבוססות על Intersection Viewer:

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 שמציגים רק. לכן יש להן ביצועים טובים, אבל צריך למלא אותן בצורה של פוליגונים כדי שאפשר יהיה להשתמש בהן בדפדפנים ישנים יותר.
• yall.js היא ספרייה שמשתמשת ב-Intersection Exploreer וחוזרת להשתמש בגורמים המטפלים באירועים. היא עלולה גם לטעון תמונות poster בסרטון באמצעות המאפיין data-poster.
• אם אתם צריכים ספרייה של טעינה מדורגת ספציפית ל-React, תוכלו להשתמש ב-react-lazyload. אומנם לא נעשה שימוש ב-Intersection שפות, אבל כן מספקת שיטה מוכרת לטעינה מדורגת של תמונות, למי שרגילים לפתח אפליקציות עם React.

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