החלפת קובצי GIF בסרטון

רוב דודסון

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

קודם מודדים

קודם כול, עליכם למדוד את ביצועי האתר:

  1. כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen מסך מלא.
  2. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
  3. לוחצים על הכרטיסייה Lighthouse.
  4. מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
  5. לוחצים על הלחצן יצירת דוח.

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

קבלת FFmpeg

יש כמה דרכים להמיר קובצי GIF לסרטונים. במדריך הזה אנחנו משתמשים ב-FFmpeg. היא כבר מותקנת ב-Glitch VM, ואתם רוצים, גם תוכלו לבצע את ההוראות שכאן כדי להתקין אותה במכונה המקומית.

פתיחת המסוף

ודאו ש-FFmpeg מותקן ופועל:

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

כאשר האתר הפעיל פתוח:

  1. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
  2. לוחצים על הכרטיסייה Lighthouse.
  3. מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
  4. לוחצים על הלחצן יצירת דוח.

אתם אמורים לראות שהביקורת 'שימוש בפורמטים של וידאו לתוכן אנימציה' עוברת בהצלחה! יש! 💪