گیف ها را با ویدیو جایگزین کنید

راب دادسون

در این کد لبه، با جایگزینی یک GIF متحرک با یک ویدیو، عملکرد را بهبود بخشید.

ابتدا اندازه گیری کنید

ابتدا نحوه عملکرد وب سایت را اندازه گیری کنید:

  1. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .
  2. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  3. روی تب Lighthouse کلیک کنید.
  4. مطمئن شوید که چک باکس Performance در لیست دسته بندی ها انتخاب شده است.
  5. روی دکمه Generate report کلیک کنید.

وقتی کارتان تمام شد، باید ببینید که Lighthouse در ممیزی «استفاده از فرمت‌های ویدیویی برای محتوای متحرک» GIF را به عنوان یک مشکل علامت‌گذاری کرده است.

FFmpeg را دریافت کنید

چندین راه وجود دارد که می توانید GIF ها را به ویدیو تبدیل کنید. این راهنما از FFmpeg استفاده می کند. قبلاً در Glitch VM نصب شده است، و در صورت تمایل، می‌توانید این دستورالعمل‌ها را دنبال کنید تا آن را روی دستگاه محلی خود نیز نصب کنید .

کنسول را باز کنید

دوباره بررسی کنید که FFmpeg نصب شده و کار می کند:

  1. روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
  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 می‌گوید که ورودی cat-herd.gif را که با پرچم -i مشخص می‌شود، بگیرد و آن را به ویدیویی به نام 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.7M است، در حالی که نسخه MP4 551K و نسخه WebM فقط 341K است. این یک پس انداز بزرگ است!

برای ایجاد مجدد جلوه GIF، HTML را به روز کنید

گیف های متحرک دارای سه ویژگی کلیدی هستند که ویدیوها باید آن ها را تکرار کنند:

  • آنها به طور خودکار بازی می کنند.
  • آنها به طور مداوم حلقه می زنند (معمولا، اما می توان از حلقه زدن جلوگیری کرد).
  • اونا ساکتن

خوشبختانه، می توانید این رفتارها را با استفاده از عنصر <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 را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .

تجربه باید یکسان به نظر برسد. تا اینجای کار خیلی خوبه.

با Lighthouse تأیید کنید

با باز بودن سایت زنده:

  1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  2. روی تب Lighthouse کلیک کنید.
  3. مطمئن شوید که چک باکس Performance در لیست دسته بندی ها انتخاب شده است.
  4. روی دکمه Generate report کلیک کنید.

باید ببینید که ممیزی "استفاده از فرمت های ویدئویی برای محتوای متحرک" در حال گذر است! وووووو 💪