🧓🏻 🍽️ 🕢 नया AV1 कोडेक: एक ब्राउज़र में वीडियो लोड करने की गति 🎿 🚔 🖐🏽

इस गाइड में, हम सीखेंगे कि वेब पर वीडियो का उपयोग कैसे किया जाए, जैसा कि 2019 में प्रथागत है। क्रोम और फ़ायरफ़ॉक्स ने नए एवी 1 कोडेक का समर्थन करना शुरू कर दिया है - उनके लिए, वीडियो को आधा बनाया जा सकता है।

हम अलग से बात करेंगे कि AV1 और H.264 में GIF को वीडियो के साथ कैसे बदलें - फिर इसका आकार 20-40 गुना कम हो जाएगा।

ब्राउज़र में AV1

YouTube पहले से ही TestTube पर इसका उपयोग करता है। Netflix ने कहा कि AV1 " उनकी अगली पीढ़ी का कोडेक होगा ।"

ईविल मार्टियंस में हम पहले से ही अपनी वेबसाइट पर और एम्पलीफायर पर इसका इस्तेमाल करते हैं । इस लेख में, मैं AV1 को लागू करने के अनुभव को साझा करूंगा और चरण-दर-चरण आपको एक वीडियो एम्बेड करने का तरीका बताऊंगा ताकि यह सभी ब्राउज़रों में काम करे।

कोडेक और कंटेनर

चित्रों के साथ, सब कुछ सरल है: या तो सभी ब्राउज़रों के लिए PNG के साथ JPEG, या आधुनिक ब्राउज़रों के लिए WebP में अधिक कॉम्पैक्ट फ़ाइलें बनाएँ। हम हमेशा सुनिश्चित कर सकते हैं कि .png फ़ाइलों में PNG प्रारूप होगा (PNG बम के दुर्लभ अपवाद के साथ, जो imgproxy के खिलाफ सुरक्षा कर सकते हैं )।

वीडियो फ़ाइलें अधिक जटिल हैं। फ़ाइल एक्सटेंशन ( .mp4 , .wmv , .webm या .mov ) केवल कंटेनर के बारे में बोलता है। जबकि वीडियो फ़ाइलों में तीन अलग-अलग घटक होते हैं:

वीडियो कोडेक निर्धारित करता है कि आप वीडियो को कितना संपीड़ित कर सकते हैं, और आपको क्या बलिदान करना होगा। वेब का मुख्य वीडियो कोड: H.264, HEVC, VP9 और, अब, AV1।
ऑडियो कोडेक ध्वनि को संपीड़ित करता है। बेशक, अगर वीडियो में कोई आवाज़ नहीं है, तो इसकी आवश्यकता नहीं है। लोकप्रिय विकल्प एमपी 3, ओपस और एएसी हैं।
कंटेनर दोनों वीडियो (कुछ प्रकार के वीडियो कोडेक द्वारा संपीड़ित) और ऑडियो स्ट्रीम (कुछ प्रकार के ऑडियो कोडेक द्वारा संकुचित) को संग्रहीत करता है। साथ ही अतिरिक्त डेटा, जैसे उपशीर्षक और मेटा-जानकारी। लोकप्रिय कंटेनर: MP4, MOV, WebM।

जब हम .mp4 फ़ाइल एक्सटेंशन देखते हैं, तो हम केवल यह कह सकते हैं कि MP4 कंटेनर का उपयोग किया गया था। लेकिन इसमें कोडेक्स अलग हो सकते हैं - लेखक H.264 और AAC, AV1 और Opus, या कुछ और ले सकता है।

निहारना AV1

AV1 एक वीडियो कोडेक है जो एक साल पहले, मार्च 2018 में जारी किया गया था। यह पिछली पीढ़ी के कोडेक - HEVC, VP9, H.264 और VP8 को पार करने के लिए बनाया गया था।

वीडियो कोडेक्स का जेनरेशन चार्ट

त्सही लेवेंट-लेवी से जेनरेशन कोडक आरेख

यदि आप रुचि रखते हैं कि एवी 1 संपीड़न में बाकी कोडेक्स को पार करने में कैसे कामयाब रहा, तो हबर पर अनुवाद में तकनीकी विवरण पढ़ें:
अगली पीढ़ी का वीडियो: AV1 का परिचय
" एवी 1 नेक्स्ट जेनरेशन कोडेक: सीडीईएफ करेक्टिव डायरेक्शनल फिल्टर "

नए अनुकूलन के कारण, AV1, H.264 या VP8 की तुलना में 30-50% वीडियो को बेहतर बनाता है, और HEVC से 30% बेहतर है। लेकिन कोडेक हाल ही में जारी किया गया था और अब तक कई बचपन की बीमारियां हैं:

वर्तमान एनकोडर अनुकूलित नहीं है। AV1 वीडियो को बहुत धीरे से संपीड़ित करता है ( जंग पर एक नया फास्ट एनकोडर पहले से ही विकास में है)। कोडेक स्ट्रीमिंग के लिए उपयुक्त नहीं है। यदि हम लैंडिंग पर स्थिर वीडियो के बारे में बात कर रहे हैं - यह समस्या हमारे लिए प्रासंगिक नहीं है।
अब तक, कोडेक केवल डेस्कटॉप क्रोम और फ़ायरफ़ॉक्स पर विंडोज पर समर्थित है। सफारी और एज का अभी तक कोई समर्थन नहीं है (हालाँकि Microsoft पहले से ही इसका परीक्षण कर रहा है)। आपको कम से कम 2 फ़ाइलों की आवश्यकता होगी: क्रोम और फ़ायरफ़ॉक्स के लिए AV1 और अन्य ब्राउज़रों के लिए H.264।

AV1 के बारे में सबसे अच्छी बात यह है कि " कटहल " वर्ग कम बिट दर पर दिखाई नहीं देते हैं।

अलग-अलग बिटरेट पर अलग-अलग कोडेक्स के लिए पिक्चर क्वालिटी की तुलना

विभिन्न बिटकॉइन पर अलग-अलग कोडेक्स के लिए तस्वीर की गुणवत्ता की तुलना - AV1 जीतता है

खाना पकाने AV1 सही ढंग से

चलो अंत में अभ्यास करने के लिए नीचे उतरें। पहले, चलो कंटेनर पर फैसला करते हैं। सिद्धांत रूप में, AV1 को विभिन्न कंटेनरों में रखा जा सकता है, लेकिन MP4 विनिर्देश में अधिक कॉम्पैक्ट और अनुशंसित है। AV1 में ध्वनि के लिए हम Opus लेते हैं, क्योंकि यह ध्वनि को पूरी तरह से संपीड़ित करता है ।

वीडियो के लिए सभी ब्राउज़रों में काम करने के लिए, हम 3 फाइलें उत्पन्न करेंगे:

विंडोज पर डेस्कटॉप क्रोम और फ़ायरफ़ॉक्स के लिए (मार्च 2019 तक बाजार का 31% ): वीडियो के लिए एवी 1 के साथ एमपी 4 कंटेनर और ध्वनि के लिए ओपस।
सफारी और एज के लिए ( बाजार का 16% ) - HEVC और AAC के साथ MP4।
बाकी के लिए: H.264 और AAC के साथ एक बड़ी MP4 फ़ाइल।

आप केवल AV1 और H.264 ले सकते हैं - वीडियो भी सभी के लिए काम करेगा।

संपीड़न के लिए, मैं कंसोल FFmpeg लेने की सलाह देता हूं। कई चित्रमय उपयोगिताओं हैं, लेकिन कंसोल में विकल्पों को सहेजना और फिर स्वचालित रूप से रूपांतरण शुरू करना आसान है। FFmpeg के नवीनतम संस्करण का उपयोग करना सुनिश्चित करें। 4.1 से पहले वाले संस्करण MP4 में AV1 का समर्थन नहीं करते हैं।

Mac OS X के लिए:

Homebrew स्थापित करें।
brew install ffmpeg

लिनक्स के लिए, आधिकारिक साइट से एक ताजा बिल्ड लेना बेहतर है - जबकि कई वितरणों में एवी 1 के लिए समर्थन के साथ कोई संस्करण नहीं है:

wget https://johnvansickle.com/ffmpeg/releases/ffmpeg-release-amd64-static.tar.xz
tar -xf ffmpeg-release-amd64-static.tar.xz
sudo cp ffmpeg-4.1-64bit-static/ff* /usr/local/bin/

विंडोज के लिए, आप विलियम डियाज़ द्वारा FFmpeg स्थापित कर सकते हैं।

हम H.264 फ़ाइल के रूपांतरण की ओर मुड़ते हैं, जिसकी हमें पुराने ब्राउज़रों के लिए आवश्यकता है। चूंकि हमारी सभी फाइलें MP4 कंटेनर का उपयोग करती हैं, मैं .av1.mp4 , .hevc.mp4 और .h264.mp4 पोस्टफिक्स का उपयोग करूंगा। लंबी टीम से घबराएं नहीं, हम फिर इसका विश्लेषण करेंगे:

 #  SOURCE.mov     - ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libfdk_aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4

अब वीडियो खोलें। video.h264.mp4 यदि गुणवत्ता अच्छी है और आकार बड़ा है, तो बढ़ाने की कोशिश करें -crf ( -crf 26 फिर -crf 28 )। यह विकल्प कम गुणवत्ता की कीमत पर फ़ाइल का आकार कम करेगा। गुणवत्ता और आकार को संतुलित करना एक कला है।

यदि कोई मूल वीडियो फ़ाइल नहीं है, तो आप पुरानी H.264 फ़ाइल को AV1 में परिवर्तित कर सकते हैं।

अब AV1 कन्वर्ट करने का समय आ गया है - मैं आपको याद दिलाता हूं, यह H.264 से अधिक लंबा होगा। कोडेक अभी तक प्रोसेसर की पूरी शक्ति का उपयोग नहीं करता है (यह समानांतर में कई फ़ाइलों को परिवर्तित करना शुरू करने के लिए समझ में आता है)।

 ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libopus -c:v libaom-av1 -crf 34 -b:v 0 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -strict experimental video.av1.mp4

गुणवत्ता और आकार का सही संतुलन -crf लिए फिर से -crf साथ -crf ।

अब HEVC के लिए भी यही है।

 ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libfdk_aac -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4

अपनी साइट की जड़ में video.h264.mp4 , video.hevc.mp4 और video.av1.mp4 कॉपी करें।

FFmpeg विकल्पों को समझना

क्या ऊपर दिए गए आदेश एक राक्षस को बुलाने वाले जादू की तरह दिखते हैं? चिंता न करें, यह PostCSS नहीं है । आइए विकल्पों को देखें।

-i SOURCE.mov इनपुट फ़ाइल को इंगित करता है, जहां से FFmpeg वीडियो और ऑडियो स्ट्रीम लेगा, उन्हें संपीड़ित करेगा और उन्हें एक नए कंटेनर में पैक करेगा।

-map_metadata -1 वीडियो से मेटा जानकारी को हटा देगा (उदाहरण के लिए, प्रोग्राम जिसमें वीडियो बनाया गया था)। ऐसी जानकारी वेब पर शायद ही उपयोगी हो।

-c:a libopus or -c:a libfdk_aac ऑडियो -c:a libfdk_aac सेट करता है। यदि आपको ध्वनि की आवश्यकता नहीं है, तो उन्हें -an बदलें।

-c:v libaom-av1 वीडियो कोडेक का चयन करता है - एक पुस्तकालय जो वीडियो स्ट्रीम के फ्रेम को संपीड़ित करेगा।

-crf 34 - लगातार दर कारक, गुणवत्ता और आकार का संतुलन। यह JPEG गुणवत्ता स्लाइडर की तरह है, केवल यह एक अलग दिशा में जाता है (0 सबसे अच्छी गुणवत्ता और सबसे बड़ी फ़ाइल है)। H.264 और AV1 के लिए CRF का पैमाना अलग है - H.264 के लिए यह 51 तक जाता है, AV1 के लिए यह 61 तक जाता है। AV1 और H.264 के लिए CRF अलग होगा।

फेसबुक को H.264 और AV1 के लिए CRF मूल्यों के बीच एक अनुमानित पत्राचार मिला:
19 → 27, 23 → 33, 27 → 39, 31 → 45, 35 → 51, 39 → 57।

-preset veryslow H.264 और HEVC कोडेक्स को रूपांतरण समय में तेज वृद्धि की लागत पर फ़ाइल को और भी अधिक संकुचित करने के लिए मजबूर करता है।

-profile:v main उपयोग H.264 द्वारा एक कोडेक प्रोफाइल को चुनने के लिए किया जाता है। केवल "मुख्य" सफारी में काम करेगा।

-b:v 0 AV1 के लिए न्यूनतम बिटरेट सेट करता है ताकि वीडियो में लगातार गुणवत्ता हो।

-pix_fmt yuv420p (पिक्सेल प्रारूप) फ़ाइल आकार को कम करने के लिए एक मुश्किल तरीका है । यह चमक के लिए मूल संकल्प को छोड़ देता है, लेकिन रंग के लिए संकल्प को कम कर देता है। हमारी आंखें रंग खराब देखती हैं, इसलिए वे इस ट्रिक को नोटिस नहीं करती हैं। इस विकल्प को हटा दें यदि आपके मामले में यह हस्तक्षेप करेगा।

-movflags +faststart फ़ाइल की शुरुआत के लिए सब कुछ महत्वपूर्ण -movflags +faststart ताकि डाउनलोड पूरा होने तक ब्राउज़र वीडियो चला सके।

-vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" वीडियो के पक्षों के आकार को निकटतम लोगों में बदल देगा (कुछ कोडेक्स 300 × 200 और 302 × 200 के संकल्प के साथ काम कर सकते हैं, लेकिन साथ काम नहीं करेंगे) 301 × 200)। यदि आप सुनिश्चित हैं कि हर जगह संकल्प 2 से विभाजित है - तो आप इस विकल्प को हटा सकते हैं।

AV1 के लिए -strict experimental जरूरत है, इसका एनकोडर अभी भी प्रयोगात्मक है।

video.av1.mp4 परिणामी फ़ाइल का नाम सेट करता है।

हम ब्राउज़रों में वीडियो लॉन्च करते हैं

अब हमें उस वीडियो को डाउनलोड करने के लिए प्रत्येक ब्राउज़र की आवश्यकता है जिसका वह समर्थन करता है। इसके लिए, <source> में एक type विशेषता है। और मैं आपको <video> के विकल्पों के बारे में पढ़ने की सलाह देता हूं।

 <video controls width="600" height="400"> <source src="video.hevc.mp4" type="video/mp4; codecs=hevc,mp4a.40.2" /> <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus" /> <source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2" /> </video>

<source> ऐसा है जैसे if…else भाव - ब्राउज़र उन्हें ऊपर से नीचे तक तब तक पढ़ता है जब तक कि वह उस type पता नहीं लगा लेता जिसका वह समर्थन करता है।

type आप पूरे फ़ाइल प्रारूप को निर्दिष्ट कर सकते हैं: कंटेनर ( video/mp4 लिए MP4), AV1 के लिए वीडियो कोडेक ( av01.0.05M.08 , HEVC के लिए avc1.4D401E और avc1.4D401E लिए avc1.4D401E ) और ऑडियो कोडेक ( opus लिए ओपस) और mp4a.40.2 AAC के लिए)।

बोनस: GIF को AV1 और H.264 में कैसे बदलें

2019 में, छोटे वीडियो के लिए GIF का उपयोग करना एक बड़ा पाप है। GIF का वजन H.264 या AV1 से 20-40 गुना अधिक है। जीआईएफ सीपीयू को जोर से मारता है और बैटरी के रिसाव को तेज करता है। यदि आपको एक छोटा लूप वाला वीडियो चाहिए, तो वीडियो कोडेक्स लें। और FFmpeg सीधे GIF से वीडियो कन्वर्ट कर सकता है।

GIF को H.264 में बदलें:

 ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4

एक भी छोटा AV1 उत्पन्न करें:

 ffmpeg -i IMAGE.gif -map_metadata -1 -an opus -c:v libaom-av1 -crf 50 -b:v 0 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -strict experimental video.av1.mp4

अब HTML में animation.av1.mp4 . animation.h264.mp4 और animation.av1.mp4 . animation.av1.mp4 डालें।

 <video autoplay loop muted playsinline width="300" height="200"> <source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08" /> <source src="animation.h264.mp4" type="video/mp4" /> </video>

autoplay और loop विकल्प वीडियो को "GIF" बनाते हैं - एक लूपेड वीडियो जो पेज लोड होने के तुरंत बाद खेलता है। जब आप वीडियो पर क्लिक करते हैं तो playsinline सफारी को पूरी स्क्रीन में खोलने से रोकता है।

वापसी का समय

AV1 अभी भी प्रायोगिक है। लेकिन यह पहले से ही आपके उपयोगकर्ताओं के एक चौथाई को खुश करने के लिए उपयोग किया जा सकता है। FFmpeg कमांड की एक जोड़ी वीडियो फाइल जेनरेट करेगी। ब्राउज़र क्षमताओं के अनुसार वीडियो प्रस्तुत करने के लिए शुरुआत से ही <video> बनाया गया था। हम पहले से ही उत्पादन में एवी 1 का उपयोग करते हैं और सब कुछ ठीक काम करता है (एवी 1 एनकोडर काम खत्म होने तक प्रतीक्षा समय को छोड़कर)।

नया AV1 कोडेक: एक ब्राउज़र में वीडियो लोड करने की गति