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

Rob Dodson

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

קודם מדידה

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

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

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

הורדת FFmpeg

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

פתיחת מסוף Cloud

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

  1. לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.
  2. לוחצים על Terminal (הערה: אם הלחצן 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 לקחת את הקלט, שמסומן בדגל -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.7MB, בעוד שגודל קובץ ה-MP4 הוא 551KB וגודל קובץ ה-WebM הוא רק 341KB. זה חיסכון עצום!

עדכון ה-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>

תצוגה מקדימה

  • כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen מסך מלא (מסך מלא).

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

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

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

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

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