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

روب دودسون

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

القياس أولاً

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

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

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

الحصول على أداة FFmpeg

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

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

التحقق جيدًا من أنّ أداة FFmpeg مثبتة ومن أنّها تعمل:

  1. انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.
  2. انقر على المحطة الطرفية (ملاحظة: إذا لم يظهر زر المحطة الطرفية، فقد تحتاج إلى استخدام خيار ملء الشاشة).
  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. انقر على زر إنشاء تقرير.

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