استبدال ملفات GIF بفيديو

Rob Dodson

في هذا الدرس التطبيقي حول الترميز، يمكنك تحسين الأداء من خلال استبدال صورة GIF متحرّكة الفيديو القادم.

القياس أولاً

عليك أولاً قياس أداء الموقع الإلكتروني:

  1. لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط ملء الشاشة ملء الشاشة
  2. اضغط على "Control+Shift+J" (أو "Command+Option+J" على أجهزة Mac) لفتح "أدوات مطوري البرامج".
  3. انقر على علامة التبويب Lighthouse.
  4. تأكّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
  5. انقر على زر إنشاء تقرير.

عند الانتهاء، من المفترَض أن تلاحظ أنّ أداة Lighthouse قد وضعت علامة على ملف GIF على أنّه ملف مشكلة متعلّقة بمشكلة "استخدام تنسيقات الفيديوهات في محتوى الصور المتحركة" التدقيق.

الحصول على لعبة FFmpeg

يمكنك تحويل ملفات GIF إلى فيديو بعدة طرق، هذا الدليل FFmpeg. وقد تم تثبيته مسبقًا على الجهاز الافتراضي 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 بأخذ الإدخال، المشار إليه بعلامة -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 هو 551 ألفًا إصدار WebM هو 341 كيلوبايت فقط. هذا توفير كبير!

يجب تعديل 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. انقر على زر إنشاء تقرير.

يجب أن يظهر لك القسم "استخدام تنسيقات الفيديو لمحتوى الرسوم المتحركة" التدقيق الآن تم اجتيازه! رائع! 💪