בדומה לרכיבי תמונה, אפשר גם לבצע טעינה מדורגת של סרטונים. סרטונים נטענים בדרך כלל עם הרכיב <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 מונפשים יכולים לכלול טווח של כמה מגה-בייט של נתונים. סרטונים באיכות ויזואלית דומה בדרך כלל להיות קטנות הרבה יותר.
השימוש ברכיב <video>
כתחליף לקובץ GIF מונפש אינו זהה
ישר כמו הרכיב <img>
. לקובצי GIF מונפשים יש שלושה מאפיינים:
- הם יופעלו באופן אוטומטי כשהם ייטענו.
- הם חוזרים בלולאה (למרות שלא תמיד זה מקרה לדוגמה).
- אין בהם טראק של אודיו.
השגת זאת באמצעות הרכיב <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.
כל אחת מספריות הטעינה העצמית האלה מתועדת היטב, עם הרבה תגי עיצוב שמתאימים למאמצים השונים של טעינה מדורגת.