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

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

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

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

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

تثبيت FFmpeg

هناك عدة طرق يمكنك من خلالها تحويل ملفات GIF إلى فيديو. يستخدم هذا الدليل FFmpeg. تم تثبيته مسبقًا في جهاز Glitch الظاهري، ويمكنك اتّباع هذه التعليمات لتثبيته على جهازك الحاسبي أيضًا إذا أردت.

فتح وحدة التحكّم

تحقَّق من تثبيت 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.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. اضغط على Ctrl ‏+ Shift ‏+ J (أو Command ‏+ Option ‏+ J على نظام التشغيل Mac) لفتح DevTools.
  2. انقر على علامة التبويب Lighthouse.
  3. تأكَّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
  4. انقر على الزر إنشاء تقرير.

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