GIF को वीडियो से बदलें

Rob Dodson

इस कोडलैब में, ऐनिमेटेड GIF की जगह वीडियो का इस्तेमाल करके परफ़ॉर्मेंस को बेहतर बनाएं.

पहले मेज़र करें

सबसे पहले, वेबसाइट की परफ़ॉर्मेंस का आकलन करें:

  1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन दबाएं.
  2. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
  3. Lighthouse टैब पर क्लिक करें.
  4. पक्का करें कि कैटगरी सूची में, परफ़ॉर्मेंस चेकबॉक्स चुना गया हो.
  5. रिपोर्ट जनरेट करें बटन पर क्लिक करें.

जांच पूरी करने के बाद, आपको दिखेगा कि Lighthouse ने "ऐनिमेशन वाले कॉन्टेंट के लिए वीडियो फ़ॉर्मैट का इस्तेमाल करें" ऑडिट में, GIF को समस्या के तौर पर फ़्लैग किया है.

FFmpeg डाउनलोड करना

GIF को वीडियो में बदलने के कई तरीके हैं. इस गाइड में, FFmpeg का इस्तेमाल किया गया है. यह Glitch VM में पहले से इंस्टॉल है. अगर आप चाहें, तो इसे अपनी लोकल मशीन पर इंस्टॉल करने के लिए, इन निर्देशों का पालन करें.

कंसोल खोलना

पक्का करें कि FFmpeg इंस्टॉल है और काम कर रहा है:

  1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  2. Terminal पर क्लिक करें (ध्यान दें: अगर Terminal बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
  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 फ़्लैग से दिखाया गया है. इसके बाद, FFmpeg इस इनपुट को 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 केबी है. यह बहुत बड़ी बचत है!

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. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
  2. Lighthouse टैब पर क्लिक करें.
  3. पक्का करें कि कैटगरी सूची में, परफ़ॉर्मेंस चेकबॉक्स चुना गया हो.
  4. रिपोर्ट जनरेट करें बटन पर क्लिक करें.

आपको दिखेगा कि "ऐनिमेशन वाले कॉन्टेंट के लिए वीडियो फ़ॉर्मैट का इस्तेमाल करें" ऑडिट अब पास हो गया है! बहुत बढ़िया! 💪