ב-Codelab הזה, תוכלו לשפר את הביצועים על ידי החלפת קובץ GIF מונפש בסרטון.
קודם מודדים
קודם כול, עליכם למדוד את ביצועי האתר:
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת דוח.
בסיום, אתם אמורים לראות שמערכת Lighthouse סימן את ה-GIF כבעיה בביקורת "שימוש בפורמטים של וידאו לתוכן אנימציה".
קבלת FFmpeg
יש כמה דרכים להמיר קובצי GIF לסרטונים. במדריך הזה אנחנו משתמשים ב-FFmpeg. היא כבר מותקנת ב-Glitch VM, ואתם רוצים, גם תוכלו לבצע את ההוראות שכאן כדי להתקין אותה במכונה המקומית.
פתיחת המסוף
ודאו ש-FFmpeg מותקן ופועל:
- לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
- לוחצים על טרמינל (הערה: אם הלחצן 'מסוף' לא מוצג, ייתכן שתצטרכו להשתמש באפשרות 'מסך מלא').
- במסוף, מריצים את:
which ffmpeg
אתם אמורים לקבל נתיב של קובץ בחזרה:
/usr/bin/ffmpeg
שינוי ה-GIF לסרטון
- במסוף, מריצים את הפקודה
cd images
כדי להיכנס לספריית התמונות. - כדי להציג את התוכן, מריצים את הפקודה
ls
.
אתם אמורים לראות משהו כזה:
$ ls
cat-herd.gif
- במסוף, מריצים את:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
הפעולה הזו מורה ל-FFmpeg לקבל את ה-input, שמסומן על-ידי הדגל -i
, של cat-herd.gif ולהמיר אותו לסרטון בשם cat-herd.mp4. הפעולה אמורה להימשך שנייה. בסיום הפקודה תוכלו להקליד שוב את ls
ולראות שני קבצים:
$ ls
cat-herd.gif cat-herd.mp4
יצירת סרטוני WebM
אמנם MP4 קיים מאז 1999, אבל WebM הוא סרטון חדש יחסית שהופץ לראשונה ב-2010. סרטוני WebM יכולים להיות הרבה יותר קטנים מסרטוני MP4, לכן הגיוני ליצור את שניהם. למרבה המזל, האלמנט <video>
מאפשר להוסיף כמה מקורות, כך שאם דפדפן לא תומך ב-WebM, הוא יכול לחזור ל-MP4.
- במסוף, מריצים את:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- כדי לבדוק את גודלי הקבצים מריצים את:
ls -lh
הקובץ אמור לכלול קובץ GIF אחד ושני סרטונים:
$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm
שימו לב שגודל ה-GIF המקורי הוא 3.7 מיליון, בעוד שגרסת ה-MP4 היא 551K, וגרסת WebM היא 341K בלבד. זה חיסכון אדיר!
צריך לעדכן את ה-HTML כדי ליצור מחדש את אפקט ה-GIF
לקובצי GIF מונפשים יש שלוש תכונות עיקריות שצריך לשכפל בסרטונים:
- הן מופעלות באופן אוטומטי.
- הם פועלים בלולאה (לרוב, אבל ניתן למנוע חזרות).
- הם שקטים.
למרבה המזל, אפשר ליצור מחדש את המצבים האלה באמצעות הרכיב <video>
.
- בקובץ
index.html
, מחליפים את השורה עם<img>
בשורה:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
רכיב <video>
שנעשה בו שימוש במאפיינים האלה יופעל באופן אוטומטי, בלולאה
אינסופית, לא יופעל באודיו ויפעיל ישירות ממסך מלא (כלומר, לא במסך מלא), את כל
ההתנהגויות המצופה מקובצי GIF מונפשים! 🎉
ציון המקורות
כל מה שנשאר לעשות הוא לציין את מקורות הסרטונים. הרכיב <video>
מחייב רכיב צאצא אחד או יותר של <source>
שמפנה לקובצי וידאו שונים שהדפדפן יכול לבחור מתוכם, בהתאם לתמיכה בפורמט.
מעדכנים את <video>
עם רכיבי <source>
שמקשרים לסרטונים של עדרי החתולים:
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
Preview
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen .
החוויה אמורה להיראות זהה. עד עכשיו, הכל טוב.
אימות באמצעות Lighthouse
כאשר האתר הפעיל פתוח:
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת דוח.
אתם אמורים לראות שהביקורת 'שימוש בפורמטים של וידאו לתוכן אנימציה' עוברת בהצלחה! יש! 💪