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