इस कोडलैब में, ऐनिमेशन वाले GIF को वीडियो से बदलकर, परफ़ॉर्मेंस को बेहतर बनाएं.
पहले मापें
सबसे पहले यह मापें कि वेबसाइट की परफ़ॉर्मेंस कैसी है:
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं. - DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- लाइटहाउस टैब पर क्लिक करें.
- पक्का करें कि कैटगरी सूची में परफ़ॉर्मेंस चेकबॉक्स को चुना गया हो.
- रिपोर्ट जनरेट करें बटन पर क्लिक करें.
इसे पूरा करने के बाद, आपको पता चलेगा कि लाइटहाउस ने "ऐनिमेट किए गए कॉन्टेंट के लिए वीडियो फ़ॉर्मैट इस्तेमाल करें" ऑडिट में GIF को समस्या के तौर पर फ़्लैग किया है.
FFmpeg पाएं
GIF को वीडियो में बदलने के कई तरीके हैं. इस गाइड में, FFmpeg का इस्तेमाल किया गया है. यह Glitch वीएम में पहले से ही इंस्टॉल है. अगर आप चाहें, तो इन निर्देशों का पालन करके इसे अपनी लोकल मशीन पर भी इंस्टॉल कर सकते हैं.
कंसोल खोलें
पक्का करें कि FFmpeg इंस्टॉल हो गया है और काम कर रहा है:
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
- Terminal पर क्लिक करें (ध्यान दें: अगर टर्मिनल बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
- कंसोल में, इसे चलाएं:
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 को कैट-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 इफ़ेक्ट को फिर से बनाने के लिए एचटीएमएल अपडेट करें
ऐनिमेशन वाले 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 की मदद से पुष्टि करें
लाइव साइट खुली होने पर:
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- लाइटहाउस टैब पर क्लिक करें.
- पक्का करें कि कैटगरी सूची में परफ़ॉर्मेंस चेकबॉक्स को चुना गया हो.
- रिपोर्ट जनरेट करें बटन पर क्लिक करें.
आपको दिखेगा कि "ऐनिमेट किए गए कॉन्टेंट के लिए वीडियो फ़ॉर्मैट का इस्तेमाल करें" ऑडिट अब पास हो रहा है! बहुत बढ़िया! 💪