GIF लाई AV1 भिडियोले प्रतिस्थापन गर्ने समय हो

यो 2019 हो र हामीले GIF हरू (होइन, हामी यो निर्णयको बारेमा कुरा गरिरहेका छैनौं! हामी यहाँ कहिल्यै सहमत हुनेछैनौं! - यहाँ हामी अंग्रेजीमा उच्चारणको बारेमा कुरा गर्दैछौं, हाम्रो लागि यो सान्दर्भिक छैन - लगभग। अनुवाद)। GIF ले ठूलो मात्रामा ठाउँ लिन्छ (सामान्यतया धेरै मेगाबाइटहरू!), जुन, यदि तपाइँ वेब विकासकर्ता हुनुहुन्छ भने, तपाइँको इच्छाको पूर्ण रूपमा विपरित छ! वेब विकासकर्ताको रूपमा, तपाइँ प्रयोगकर्ताहरूलाई डाउनलोड गर्न आवश्यक चीजहरू कम गर्न चाहनुहुन्छ ताकि साइट छिटो लोड हुन्छ। एउटै कारणको लागि, तपाइँ जाभास्क्रिप्ट मिनिफाइ, PNG, JPEG अनुकूलन, र कहिलेकाहीँ रूपान्तरण JPEG बाट WebP। तर पुरानो GIF लाई के गर्ने?

हामी जहाँ जाँदैछौं हामीलाई GIF को आवश्यकता पर्दैन!

यदि तपाईंको लक्ष्य साइट लोडिङ गति सुधार गर्ने हो भने, तपाईंले GIF बाट छुटकारा पाउन आवश्यक छ! तर तपाईं कसरी एनिमेटेड तस्वीर बनाउन? जवाफ भिडियो हो। र धेरै जसो अवस्थामा, तपाईंले राम्रो गुणस्तर र 50-90% को ठाउँ बचत पाउनुहुनेछ! जीवनमा, धेरैजसो चीजहरूको फाइदा र बेफाइदा हुन्छ। जब तपाइँ भिडियोसँग GIF प्रतिस्थापन गर्नुहुन्छ, प्राय: तपाइँ कुनै पनि विपक्ष फेला पार्न सक्षम हुनुहुने छैन।

सबै GIF को साथ तल!

सौभाग्य देखि, हालका वर्षहरूमा भिडियोहरूसँग GIF हरू प्रतिस्थापन सामान्य भएको छ, त्यसैले सबै आवश्यक उपकरणहरू पहिले नै प्रयोगमा छन्। यस पोष्टमा, म व्हीललाई पुन: आविष्कार गर्ने छैन, तर अवस्थित समाधानहरूलाई मात्र थोरै सुधार गर्नेछु। त्यसैले यहाँ सार छ:

1. एउटा GIF लिनुहोस् र यसलाई भिडियोमा रूपान्तरण गर्नुहोस्
2. H.264 वा VP9 प्रयोग गरेर भिडियोलाई सङ्केतन गर्नुहोस्, अर्थात्। यसलाई कम्प्रेस गर्नुहोस् र MP4 वा WebM कन्टेनरमा प्याक गर्नुहोस्
3. बदल्नुहोस् <img> एनिमेटेड GIF को साथ <video> रोलर संग
4. GIF प्रभावको लागि ध्वनि र लूप बिना अटोप्ले सक्रिय गर्नुहोस्

गुगलसँग प्रक्रिया वर्णन गर्ने राम्रो कागजातहरू छन्।

यो 2019 हो

अहिले 2019 हो। प्रगति अगाडि बढ्छ, र हामीले यसलाई निरन्तरता दिनुपर्छ। अहिलेसम्म हामीसँग दुईवटा कोडेक विकल्पहरू छन् जुन सबै ब्राउजरहरू र भिडियो एन्कोडिङ उपकरणहरूमा व्यापक रूपमा समर्थित छन्:

1. H.264 - 2003 मा पेश गरियो र आज सबैभन्दा व्यापक रूपमा प्रयोग गरिन्छ
2. VP9 - 2013 मा देखा पर्यो र H.50 को तुलनामा लगभग 264% को कम्प्रेसन सुधार हासिल गर्यो, यद्यपि जसरी तिनीहरू यहाँ लेख्छन् सबै सधैं यति गुलाबी हुँदैन

नोट: यद्यपि H.265 H.264 को अर्को संस्करण हो र VP9 सँग प्रतिस्पर्धा गर्न सक्षम छ, पृष्ठमा देखाइए अनुसार, खराब ब्राउजर समर्थनको कारणले म यसलाई विचार गर्दिन। https://caniuse.com/#feat=hevc। H.265 H.264 जत्तिकै व्यापक नहुनु र किन एलायन्स अफ ओपन मिडिया कन्सोर्टियमले रोयल्टी-रहित कोडेक, AV1 सँग काम गरिरहेको छ भन्ने मुख्य कारण लाइसेन्सिङ लागतहरू हुन्।

सम्झनुहोस्, हाम्रो लक्ष्य लोड हुने समयलाई गति दिनको लागि ठूला GIF हरूलाई सम्भावित सानो आकारमा संकुचित गर्नु हो। यो एक अनौठो 2019 हुनेछ यदि हामीसँग हाम्रो शस्त्रागारमा भिडियो कम्प्रेसनको लागि नयाँ मानक छैन। तर यो अवस्थित छ र AV1 भनिन्छ। AV1 को साथ तपाईं सक्नुहुन्छ VP30 को तुलनामा कम्प्रेसनमा लगभग 9% सुधार प्राप्त गर्नुहोस्। लेपोटा! 🙂

AV1 2019 देखि तपाईंको सेवामा छ!

डेस्कटपहरूमा

भर्खरै AV1 भिडियो डिकोडिङका लागि समर्थन डेस्कटप संस्करणहरूमा थपिएको थियो Google Chrome 70 и मोजिला फायरफक्स 65। अहिले फायरफक्स समर्थन बग्गी छ र दुर्घटनाहरू निम्त्याउन सक्छ, तर चीजहरू थप्दा सुधार गर्नुपर्छ dav1d डिकोडर पहिले नै फायरफक्स 67 मा (पहिले नै जारी, तर समर्थन देखा पर्यो - लगभग। अनुवाद।)। नयाँ संस्करणको बारेमा विवरणहरूको लागि पढ्नुहोस् - dav1d 0.3.0 रिलीज: अझ छिटो!

स्मार्टफोनमा

उपयुक्त डिकोडरहरूको अभावको कारणले स्मार्टफोनहरूको लागि हाल कुनै हार्डवेयर समर्थन छैन। तपाईले सफ्टवेयर डिकोडिङ गर्न सक्नुहुन्छ, यद्यपि यसले ब्याट्री खपत बढाउनेछ। AV1 हार्डवेयर डिकोडिङलाई समर्थन गर्ने पहिलो मोबाइल SOCs २०२० मा देखा पर्नेछ।

र त्यसपछि लेखका पाठकहरू जस्तै छन्, "त्यसोभए यदि मोबाइल फोनले यसलाई राम्रोसँग समर्थन गर्दैन भने, किन AV1 प्रयोग गर्ने?"

AV1 एकदम नयाँ कोडेक हो, र हामी यसको अनुकूलनको शुरुवातमा छौं। यस लेखलाई "तपाईंले खाना पकाउँदा भीडले पछ्याउनेछ" चरणको रूपमा सोच्नुहोस्। डेस्कटप समर्थन आफैंमा केही दर्शकहरूको लागि साइटहरूलाई गति दिनेछ। र पुरानो कोडेकहरू फलब्याक परिदृश्यको रूपमा प्रयोग गर्न सकिन्छ जब AV1 लक्षित उपकरणमा समर्थित छैन। तर प्रयोगकर्ताहरूले AV1 समर्थन भएका उपकरणहरूमा स्विच गर्दा, सबै तयार हुनेछ। यो प्राप्त गर्नको लागि, हामीले तल देखाइएको भिडियो ट्याग सिर्जना गर्न आवश्यक छ, जसले ब्राउजरलाई आफ्नो मनपर्ने ढाँचा चयन गर्न अनुमति दिनेछ - AV1 - >> VP9 - >> H.264। ठीक छ, यदि प्रयोगकर्तासँग धेरै पुरानो उपकरण वा नेभिगेटर छ जुन भिडियोलाई समर्थन गर्दैन (जो H264 सँग एकदमै असम्भव छ), त्यसपछि उसले GIF मात्र देख्नेछ

<video style="display:block; margin: 0 auto;" autoplay loop muted playsinline poster="RollingCredits.jpg">
  <source src="media/RollingCredits.av1.mp4" type="video/mp4">
  <source src="media/RollingCredits.vp9.webm" type="video/webm">
  <source src="media/RollingCredits.x264.mp4" type="video/mp4">
  <img src="media/RollingCredits.gif">
</video>

AV1 को सिर्जना

AV1 मा भिडियोहरू सिर्जना गर्न सजिलो छ। यहाँबाट तपाईको प्रणालीको लागि नवीनतम ffmpeg बिल्ड डाउनलोड गर्नुहोस् र तलका आदेशहरू प्रयोग गर्नुहोस्। हामी लक्ष्य बिटरेट प्राप्त गर्न 2 पासहरू प्रयोग गर्छौं। यो गर्नको लागि हामी ffmpeg दुई पटक चलाउनेछौं। पहिलो पटक हामीले नतिजा अस्तित्वहीन फाइलमा लेख्छौं। यसले ffmpeg को दोस्रो रनको लागि आवश्यक पर्ने लग सिर्जना गर्नेछ।

# Linux or Mac
## Проход 1
ffmpeg -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 /dev/null && 
## Проход 2
ffmpeg -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4

# Windows
## Проход 1
ffmpeg.exe -i input.mp4 -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 1 -f mp4 NUL && ^
## Проход 2
ffmpeg.exe -i input.mp4 -pix_fmt yuv420p -movflags faststart -c:v libaom-av1 -b:v 200k -filter:v scale=720:-1 -strict experimental -cpu-used 1 -tile-columns 2 -row-mt 1 -threads 8 -pass 2 output.mp4

यहाँ प्यारामिटरहरूको ब्रेकडाउन छ:

-i - Входной файл.

-pix_fmt - Используем формат 4:2:0 для выбора информации о цветности в видео. Существует много других возможных форматов, но 4:2:0 наиболее совместимый.

-c:v - Какой кодек использовать, в нашем случае - AV1.<br />
-b:v – Средний битрейт, которого мы хотим добиться.

-filter:v scale - Фильтр масштаба ffmpeg используется для уменьшения разрешения видео. Мы устанавливаем X:-1 что говорит ffmpeg уменьшить ширину до X, сохранив соотношение сторон.

-strict experimental - Надо указать, т.к. AV1 достаточно новый кодек.

-cpu-used - Ужасно названный параметр, который на самом деле используется для выбора уровня качества видео. Возможные значения 0-4. Чем меньше значение, тем лучше качество и, соответственно, больше время, которое займёт кодировка.

-tile-columns - Для использования нескольких тредов. Говорит AV1 разбить видео на отдельные колонки, которые могут быть перекодированы независимо для лучшей утилизации ЦПУ.

-row-mt – Тоже, что и предыдущий параметр, но разбивает так же на строки внутри колонок.

-threads - Количество тредов.

-pass - Какой проход сейчас выполняется.

-f - Используется только при первом проходе. Указывает формат выходного файла, т.е. MP4 в нашем случае.

-movflags faststart - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.

GIF बनाउँदै

GIF सिर्जना गर्न मैले तलको आदेश प्रयोग गरें। आकार घटाउनको लागि, मैले GIF लाई 720px चौडा र 12 fps मा मूल 24 fps भिडियोको सट्टा मापन गरें।

./ffmpeg -i /mnt/c/Users/kasing/Desktop/ToS.mov -ss 00:08:08 -t 12
-filter_complex "[0:v] fps=12,scale=720:-1" -y scene2.gif

परीक्षण नतीजा

सय पटक पढ्नु भन्दा एक पटक हेर्नु राम्रो हो, हैन? AV1 हाम्रो उद्देश्यका लागि सही छनोट हो भनी सुनिश्चित गरौं। मैले यहाँ उपलब्ध टियर्स अफ स्टिल भिडियो नि:शुल्क लिएको छु https://mango.blender.org/, र AV1, VP9, ​​H.264 कोडेकहरूको लागि लगभग उही बिटरेट प्रयोग गरेर यसलाई रूपान्तरण गरियो। नतिजाहरू तल छन् त्यसैले तपाईं तिनीहरूलाई आफ्नो लागि तुलना गर्न सक्नुहुन्छ।

नोट १: यदि तलको फाइल तपाईंको लागि लोड हुँदैन भने, यो तपाईंको ब्राउजर अपडेट गर्ने समय हुन सक्छ। म क्रोमियम आधारित ब्राउजर जस्तै क्रोम, भिवाल्डी, ब्रेभ वा ओपेरा सिफारिस गर्दछु। यहाँ AV1 समर्थन मा नवीनतम जानकारी छ https://caniuse.com/#feat=av1

नोट १: लिनक्समा फायरफक्स 66 को लागी तपाईले झण्डा सेट गर्न आवश्यक छ media.av1.enabled अर्थ मा true в about:config

नोट १: मैले तलको नियमित GIF हरू तिनीहरूको ठूलो आकार र यो पृष्ठ लोड गर्न आवश्यक पर्ने डाटाको मात्राको कारणले समावेश नगर्ने निर्णय गरेको छु! (यो विडम्बनापूर्ण हुनेछ, किनकि यो पृष्ठ पृष्ठमा डाटाको मात्रा घटाउने बारे हो :))। तर तपाईं यहाँ अन्तिम GIF हरू हेर्न सक्नुहुन्छ https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

अनुवादक नोट: Habr ले तपाईंलाई अटोप्ले सक्षम गर्न र फाइल लुप गर्न अनुमति दिँदैन, त्यसैले तपाईंले गुणस्तर मात्र मूल्याङ्कन गर्न सक्नुहुन्छ। तपाईंले "एनिमेटेड चित्रहरू" लाई लाइभमा कस्तो देखिन्छ भनेर हेर्न सक्नुहुन्छ मूल लेख.

दृश्य 1 @ 200 Kbps

यहाँ धेरै आन्दोलनहरू छन्, जुन कम बिटरेटहरूमा विशेष गरी संवेदनशील छ। तपाईले यो बिटरेटमा H.264 कति खराब छ भनेर तुरुन्तै देख्न सक्नुहुन्छ; वर्गहरू तुरुन्तै देखिने छन्। VP9 ले स्थितिलाई थोरै सुधार गर्दछ, तर वर्गहरू अझै देखिने छन्। AV1 स्पष्ट रूपमा जित्छ, स्पष्ट रूपमा राम्रो चित्र उत्पादन गर्दै।

H.264

VP9

AV1

दृश्य 2 @ 200 Kbps

यहाँ धेरै पारदर्शी CGI सामग्री छ। नतिजाहरू पछिल्लो पटक जस्तो फरक छैनन्, तर समग्रमा AV1 राम्रो देखिन्छ।

H.264

VP9

AV1

दृश्य 3 @ 100 Kbps

यस दृश्यमा, हामी बिटरेटलाई 100 Kbps मा बदल्छौं र परिणामहरू एकरूप हुन्छन्। AV1 ले कम बिटरेटहरूमा पनि आफ्नो नेतृत्व कायम राख्छ!

H.264

VP9

AV1

केक मा चेरी

GIF को तुलनामा बचत गरिएको ब्यान्डविथको मात्रा महसुस गरेर यो लेख समाप्त गर्न - सबै भिडियोहरूको कुल आकार उच्च छ... १.६२ एमबी!! सहि। केहि कमबख्त 1,708,032 बाइट्स! तुलनाको लागि, यहाँ प्रत्येक दृश्यको लागि GIF र AV1 भिडियो आकारहरू छन्

GIF
AV1

दृश्य १
11.7 एमबी
0.33 एमबी

दृश्य १
7.27 एमबी
0.18 एमबी

दृश्य १
5.62 एमबी
0.088 एमबी

बस आश्चर्यजनक! हैन र?

नोट: VP9 र H264 को फाइल आकारहरू दिइएको छैन, किनकि तिनीहरू व्यावहारिक रूपमा एउटै बिटरेटको प्रयोगको कारणले AV1 भन्दा फरक छैनन्। एउटै साइजका दुई थप स्तम्भहरू थप्नु अनावश्यक हुनेछ, केवल हाइलाइट गर्नका लागि कि यी कोडेकहरूले धेरै साना फाइल साइजहरूमा GIF भन्दा धेरै राम्रो गुणस्तर उत्पादन गर्छन्।

स्रोत: www.habr.com