এটি AV1 ভিডিও দিয়ে GIF প্রতিস্থাপন করার সময়

এটি 2019 এবং এটি প্রায় সময় এসেছে আমরা জিআইএফ-এর বিষয়ে সিদ্ধান্ত নিয়েছি (না, আমরা এই সিদ্ধান্তের কথা বলছি না! আমরা এখানে একমত হবে না! - এখানে আমরা ইংরেজিতে উচ্চারণ সম্পর্কে কথা বলছি, আমাদের জন্য এটি প্রাসঙ্গিক নয় - প্রায়। অনুবাদ) জিআইএফগুলি প্রচুর পরিমাণে স্থান নেয় (সাধারণত বেশ কয়েকটি মেগাবাইট!), যা, আপনি যদি একজন ওয়েব বিকাশকারী হন তবে আপনার ইচ্ছার সম্পূর্ণ বিপরীত! একজন ওয়েব ডেভেলপার হিসাবে, আপনি ব্যবহারকারীদের ডাউনলোড করার জন্য প্রয়োজনীয় জিনিসগুলি কমিয়ে আনতে চান যাতে সাইটটি দ্রুত লোড হয়৷ একই কারণে, আপনি জাভাস্ক্রিপ্ট ছোট করুন, PNG, JPEG অপ্টিমাইজ করুন এবং কখনও কখনও রূপান্তর করুন JPEG থেকে WebP. কিন্তু পুরনো জিআইএফ দিয়ে কী করবেন?

আমরা যেখানে যাচ্ছি সেখানে আমাদের GIF লাগবে না!

আপনার লক্ষ্য যদি সাইট লোডিং গতি উন্নত করা হয়, তাহলে আপনাকে GIF গুলি থেকে পরিত্রাণ পেতে হবে! কিন্তু তাহলে কিভাবে আপনি অ্যানিমেটেড ছবি বানাবেন? উত্তর হল ভিডিও। এবং বেশিরভাগ ক্ষেত্রে, আপনি আরও ভাল মানের এবং 50-90% এর স্থান সঞ্চয় পাবেন! জীবনে, বেশিরভাগ জিনিসেরই ভালো-মন্দ থাকে। আপনি যখন ভিডিও দিয়ে GIF প্রতিস্থাপন করেন, প্রায়শই আপনি কোন অসুবিধা খুঁজে পাবেন না।

সমস্ত GIF সহ!

সৌভাগ্যবশত, সাম্প্রতিক বছরগুলিতে ভিডিওগুলির সাথে GIF গুলি প্রতিস্থাপন করা সাধারণ ব্যাপার হয়ে দাঁড়িয়েছে, তাই সমস্ত প্রয়োজনীয় সরঞ্জাম ইতিমধ্যেই ব্যবহার করা হচ্ছে৷ এই পোস্টে, আমি চাকাটি পুনরায় উদ্ভাবন করব না, তবে বিদ্যমান সমাধানগুলিকে সামান্য উন্নতি করব। তাই এখানে সারাংশ:

1. একটি GIF নিন এবং এটি একটি ভিডিওতে রূপান্তর করুন
2. H.264 বা VP9 ব্যবহার করে ভিডিও এনকোড করুন, যেমন এটিকে সংকুচিত করুন এবং MP4 বা WebM পাত্রে প্যাক করুন
3. প্রতিস্থাপন করুন <img> অ্যানিমেটেড GIF চালু আছে <video> রোলার দিয়ে
4. একটি GIF প্রভাবের জন্য শব্দ এবং লুপ ছাড়া অটোপ্লে চালু করুন

Google এর প্রক্রিয়াটি বর্ণনা করে ভাল ডকুমেন্টেশন রয়েছে।

এটা 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 হার্ডওয়্যার ডিকোডিং সমর্থনকারী প্রথম মোবাইল SOC 2020 সালে উপস্থিত হবে৷

এবং তারপরে নিবন্ধটির পাঠকদের মত, "তাই যদি মোবাইল ফোনগুলি এখনও এটিকে সঠিকভাবে সমর্থন না করে, তাহলে কেন 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 তৈরি করতে আমি নীচের কমান্ডটি ব্যবহার করেছি। আকার কমাতে, আমি আসল 720 fps ভিডিওর পরিবর্তে GIF কে 12px চওড়া এবং 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 কোডেকগুলির জন্য প্রায় একই বিটরেট ব্যবহার করে এটিকে রূপান্তরিত করেছে। ফলাফলগুলি নীচে রয়েছে তাই আপনি নিজের জন্য তাদের তুলনা করতে পারেন।

নোট 1: নীচের ফাইলটি আপনার জন্য লোড না হলে, এটি আপনার ব্রাউজার আপডেট করার সময় হতে পারে৷ আমি একটি ক্রোমিয়াম ভিত্তিক ব্রাউজার সুপারিশ করব যেমন ক্রোম, ভিভাল্ডি, ব্রেভ বা অপেরা। এখানে AV1 সমর্থনের সর্বশেষ তথ্য https://caniuse.com/#feat=av1

নোট 2: ফায়ারফক্স ৬৬ এর জন্য Linux আপনাকে একটি ফ্ল্যাগ সেট করতে হবে media.av1.enabled অর্থে true в about:config

নোট 3: এই পৃষ্ঠাটি লোড করার জন্য তাদের বড় আকার এবং ডেটার পরিমাণের কারণে আমি নীচে নিয়মিত 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

এখানে প্রচুর স্বচ্ছ সিজিআই সামগ্রী রয়েছে। ফলাফলগুলি গতবারের মতো আলাদা নয়, তবে সামগ্রিকভাবে AV1 আরও ভাল দেখাচ্ছে।

H.264

VP9

AV1

দৃশ্য 3 @ 100 Kbps

এই দৃশ্যে, আমরা বিটরেট কমিয়ে 100 Kbps এ পরিণত করি এবং ফলাফলগুলি সামঞ্জস্যপূর্ণ। AV1 কম বিটরেটেও তার নেতৃত্ব বজায় রাখে!

H.264

VP9

AV1

কেকের উপর চেরি

GIF-এর তুলনায় সংরক্ষিত ব্যান্ডউইথের পরিমাণ অনুভব করে এই নিবন্ধটি শেষ করতে - সমস্ত ভিডিওর মোট আকার বেশি... 1.62 MB!! ঠিক। কিছু ফাকিং 1,708,032 বাইট! তুলনা করার জন্য, এখানে প্রতিটি দৃশ্যের জন্য GIF এবং AV1 ভিডিও আকার রয়েছে৷

জিআইএফ
AV1

1 ম দৃশ্য
11.7 মেগাবাইট
0.33 মেগাবাইট

2 ম দৃশ্য
7.27 মেগাবাইট
0.18 মেগাবাইট

3 ম দৃশ্য
5.62 মেগাবাইট
0.088 মেগাবাইট

সহজভাবে অত্যাশ্চর্য! তাই না?

দ্রষ্টব্য: VP9 এবং H264 ফাইলের আকার দেওয়া হয় না, যেহেতু একই বিটরেট ব্যবহারের কারণে এগুলি কার্যত AV1 থেকে আলাদা নয়। একই আকারের সাথে আরও দুটি কলাম যুক্ত করা অপ্রয়োজনীয় হবে, শুধুমাত্র হাইলাইট করার জন্য যে এই কোডেকগুলি অনেক ছোট ফাইল আকারে GIF এর থেকে অনেক ভাল মানের উত্পাদন করে।

উত্স: www.habr.com