سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس و از سایت میزفا همراه شما هستیم. تو جلسه قبلی درباره روش رفع خطای Use passive listeners to improve scrolling performance صحبت کردیم و در این جلسه به آموزش برطرف کردن ارور Use video formats for animated content در جی تی متریکس می‌پردازیم. این خطا به بررسی فرمت ویدئوها اشاره داره و برطرف کردنش هم بسیار ساده ست.
لطفا تا پایان با میزفا همراه باشید.
سرفصل‌های پست
خلاصه خطای Use video formats for animated content
میزان سختی: **
روی چه مواردی تاثیر می‌ذاره: خطای Avoid enormous network payloads
علت ایجاد خطای Use video formats for animated content چیست؟
استفاده از ویدئو در صفحات سایت می‌تونه اثر خیلی مثبتی روی تجربه کاربری و رضایت کاربران از محتوا داشته باشه و حتی روی افزایش فروش و بهینه سازی نرخ تبدیل هم موثره. اما اگه از منظر بهینه سازی سرعت سایت به ویدئوها نگاه کنیم، این منابع به دلیل حجم نسبتا زیادی که دارند ممکنه باعث کاهش سرعت صفحه بشن. پس باید در انتخاب فرمت ویدئو و همچنین فشرده سازی اون نهایت دقت رو به خرج بدیم.
خطای Use video formats for animated content در جی تی متریکس جدید بیشتر اشاره به فرمت فایل‌های ویدئویی داره و تاکید می‌کنه که از GIF استفاده نکنیم. فرمت GIF مشکلاتی داره که باعث کاهش سرعت لود صفحه میشه. هرچقدر حجم GIF بیشتر باشه، اثرش روی سرعت هم بیشتره. پیشنهاد میشه به‌جای GIF از فرمت‌هایی مثل MP4 یا WebM برای محتواهای متحرک (ویدئوها) استفاده کنیم. این کار باعث رفع ارور Use video formats for animated content هم میشه.
اساسا فرمت GIF دارای ۳ مشکل هست که فرمت‌هایی که پیشنهاد کردیم این مشکل رو ندارند. این ۳ مورد عبارتند از:
- پخش شدن ویدئو به‌صورت خودکار
- پخش شدن دوباره ویدئو
- بدون صدا (Silent) بودن محتوا
چطور خطای Use video formats for animated content را برطرف کنیم؟
سایت GTmetrix فایل‌های GIF که حجم اونها بیشتر از ۱۰۰ کیلوبایت باشه رو خطا در نظر می‌گیره. با کلیک روی منوی Structure جی تی متریکس می‌تونیم ببینیم آیا چنین خطایی در صفحه ما وجود داره یا نه. در این صورت پیشنهاد میشه GIF رو به یکی از فرمت‌های MP4 یا WebM تبدیل کنیم. با فرمت MP4 که قطعا آشنایی دارید. فرمت WebM هم از جدیدترین فرمت‌ها برای محتواهای متحرک هست که معمولا خروجی این فرمت از MP4 هم حجم کمتری داره. اما هنوز همه مرورگرها ازش پشتیبانی نمی‌کنند. وضعیت پشتیبانی مرورگرها از WebM رو می‌تونید اینجا ببینید. پس استفاده ازش با کمی ریسک همراهه. چون ممکنه مرورگر بعضی از کاربران از این فرمت پشتیبانی نکنه. البته در ادامه راه حلی رو برای این مشکل ارائه می‌کنیم.
برای تبدیل آنلاین GIF به MP4 یا WebM و برطرف کردن خطای Use video formats for animated content می‌تونید از سایت EZGIF استفاده کنید.
استفاده از تگ video و حل مشکل عدم پشتیبانی WebM
با استفاده از تگ video میشه هر ۲ فرمت WebM و MP4 رو برای محتوای ویدئویی استفاده کنیم. در این صورت کاربرانی که مرورگر اونها از WebM پشتیبانی می‌کنه این فرمت رو دانلود می‌کنند و سایر کاربران همون فرمت MP4 رو.
<video autoplay muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>تگ <video> نیاز به حداقل یک <source> داره که ما اینجا از ۲تا <source> استفاده می‌کنیم چون لازمه هر ۲ فرمت رو استفاده کنیم. ترتیب فرمت‌ها خیلی مهمه و اگه می‌خوایم فرمت WebM اولویت داشته باشه، تو <source> اول، آدرس این فرمت رو قرار می‌دیم.
اگه می‌خواید راجع به تنظیمات بیشتر <video> و ویژگی‌هایی که در این کد استفاده شده (مثل autoplay و muted و…) اطلاعات بیشتری به‌دست بیارید، مقاله تگ video رو بخونید.
جمع بندی
در این مقاله میزفا درباره روش حل مشکل Use video formats for animated content در جی تی متریکس جدید صحبت کردیم. این خطا مربوط به فرمت منابع ویدئویی هست و باید به‌جای GIF از MP4 یا WebM استفاده کنیم. امیدوارم این آموزش برای شما مفید بوده باشه. تو جلسه بعدی درباره خطای User Timing marks and measures صحبت می‌کنیم.
اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید تا با کمال میل پاسخگوی شما عزیزان باشیم.
