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

ב-Codelab הזה, אפשר לשפר את הביצועים על ידי החלפת GIF מונפש וידאו.

מדידה ראשונה

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

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

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

הורדת FFmpeg

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

פתיחת המסוף

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

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

תצוגה מקדימה

  • כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא מסך מלא.

החוויה אמורה להיראות זהה. עד עכשיו טוב.

אימות באמצעות Lighthouse

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

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

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