ভিডিও দিয়ে GIF প্রতিস্থাপন করুন

Rob Dodson

এই কোডল্যাবটি অনুসরণ করতে, একটি দ্বিতীয় ট্যাবে এই সমস্যাটি খুলুন।

দ্রষ্টব্য: এই কোডল্যাবটি Chrome DevTools ব্যবহার করে। আপনার কাছে আগে থেকে না থাকলে Chrome ডাউনলোড করুন ৷

এই কোডল্যাবে, একটি ভিডিওর সাথে একটি অ্যানিমেটেড GIF প্রতিস্থাপন করে কর্মক্ষমতা উন্নত করুন৷

প্রথমে পরিমাপ করুন

ওয়েবসাইটটি কীভাবে কাজ করে তা প্রথমে পরিমাপ করুন:

1. সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
2. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
3. লাইটহাউস ট্যাবে ক্লিক করুন।
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 কে 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> চাইল্ড এলিমেন্ট প্রয়োজন যা বিভিন্ন ভিডিও ফাইলের দিকে নির্দেশ করে যা ব্রাউজার বেছে নিতে পারে, ফর্ম্যাট সমর্থনের উপর নির্ভর করে। আপনার বিড়াল-পালের ভিডিওগুলির সাথে লিঙ্ক করে এমন <source> > উপাদানগুলির সাথে <video> আপডেট করুন:

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

দ্রষ্টব্য: ব্রাউজাররা কোনটি <source> সর্বোত্তম সে সম্পর্কে অনুমান করে না, তাই <source> এর ক্রম গুরুত্বপূর্ণ। উদাহরণস্বরূপ, আপনি যদি প্রথমে একটি MP4 ভিডিও নির্দিষ্ট করেন এবং ব্রাউজারটি WebM সমর্থন করে, ব্রাউজারগুলি WebM <source> এড়িয়ে যাবে এবং পরিবর্তে MPEG-4 ব্যবহার করবে। আপনি যদি প্রথমে একটি WebM <source> ব্যবহার করতে চান তবে প্রথমে এটি নির্দিষ্ট করুন!

পূর্বরূপ

• সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .

অভিজ্ঞতা একই দেখতে হবে. এখন পর্যন্ত তাই ভাল.

বাতিঘর দিয়ে যাচাই করুন

লাইভ সাইট খোলার সাথে:

1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
2. লাইটহাউস ট্যাবে ক্লিক করুন।
3. নিশ্চিত করুন যে পারফরম্যান্স চেকবক্সটি বিভাগ তালিকায় নির্বাচিত হয়েছে।
4. জেনারেট রিপোর্ট বোতামে ক্লিক করুন।

আপনি দেখতে হবে যে "অ্যানিমেটেড সামগ্রীর জন্য ভিডিও ফর্ম্যাট ব্যবহার করুন" অডিট এখন পাস হচ্ছে! উহু! 💪