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

Rob Dodson

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

القياس أولاً

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

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

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