در این کد لبه، با جایگزینی یک GIF متحرک با یک ویدیو، عملکرد را بهبود بخشید.
ابتدا اندازه گیری کنید
ابتدا نحوه عملکرد وب سایت را اندازه گیری کنید:
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید
. - «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
- روی تب Lighthouse کلیک کنید.
- مطمئن شوید که چک باکس Performance در لیست دسته بندی ها انتخاب شده است.
- روی دکمه Generate report کلیک کنید.
وقتی کارتان تمام شد، باید ببینید که Lighthouse در ممیزی «استفاده از فرمت‌های ویدیویی برای محتوای متحرک» GIF را به عنوان یک مشکل علامت‌گذاری کرده است.
FFmpeg را دریافت کنید
چندین راه وجود دارد که می توانید GIF ها را به ویدیو تبدیل کنید. این راهنما از FFmpeg استفاده می کند. قبلاً در Glitch VM نصب شده است، و در صورت تمایل، می‌توانید این دستورالعمل‌ها را دنبال کنید تا آن را روی دستگاه محلی خود نیز نصب کنید .
کنسول را باز کنید
دوباره بررسی کنید که FFmpeg نصب شده و کار می کند:
- روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
- روی ترمینال کلیک کنید (توجه: اگر دکمه ترمینال نشان داده نشد، ممکن است لازم باشد از گزینه تمام صفحه استفاده کنید).
- در کنسول اجرا کنید:
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 است. این یک پس انداز بزرگ است!
HTML را برای ایجاد مجدد جلوه 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>
پیش نمایش
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
تجربه باید یکسان به نظر برسد. تا اینجای کار خیلی خوبه.
با Lighthouse تأیید کنید
با باز بودن سایت زنده:
- «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
- روی تب Lighthouse کلیک کنید.
- مطمئن شوید که چک باکس Performance در لیست دسته بندی ها انتخاب شده است.
- روی دکمه Generate report کلیک کنید.
باید ببینید که ممیزی "استفاده از فرمت های ویدئویی برای محتوای متحرک" در حال گذر است! وووووو 💪