ProHoster > Блог > Administrasi > Iku wektu kanggo ngganti GIF karo video AV1

Iku wektu kanggo ngganti GIF karo video AV1

Iku wektu kanggo ngganti GIF karo video AV1

Iki 2019 lan iki wektune kita mutusake babagan GIF (ora, kita ora ngomong babagan keputusan iki! Kita ora bakal setuju ing kene! - ing kene kita ngomong babagan pronunciation ing basa Inggris, kanggo kita iki ora cocog - kira-kira. ngartekne). GIF njupuk akeh spasi (biasane sawetara megabyte!), sing, yen sampeyan dadi pangembang web, pancen bertentangan karo kepinginan sampeyan! Minangka pangembang web, sampeyan pengin nyilikake perkara sing kudu diunduh pangguna supaya situs kasebut cepet dimuat. Kanggo alasan sing padha, sampeyan nyilikake JavaScript, ngoptimalake PNG, JPEG, lan kadhangkala ngowahi JPEG menyang WebP. Nanging apa sing kudu ditindakake karo GIF lawas?

Kita ora butuh GIF menyang ngendi!

Yen tujuan sampeyan nambah kacepetan loading situs, mula sampeyan kudu nyingkirake GIF! Nanging kepiye carane nggawe gambar animasi? Jawaban iki video. Lan ing sawetara kasus, sampeyan bakal entuk kualitas sing luwih apik lan ngirit ruang 50-90%! Ing urip, akeh perkara duwe pro lan kontra. Nalika sampeyan ngganti GIF karo video, paling asring sampeyan ora bakal bisa nemokake cons.

Mudhun karo kabeh GIF!

Untunge, ngganti GIF karo video wis umum ing taun-taun pungkasan, mula kabeh alat sing dibutuhake wis digunakake. Ing kirim, Aku ora reinvent setir, nanging mung bakal nambah solusi ana. Dadi iki inti:

  1. Njupuk GIF lan Ngonversi menyang video
  2. Encode video nggunakake H.264 utawa VP9, ​​i.e. compress lan Pack menyang MP4 utawa WebM wadhah
  3. Ganti <img> karo GIF animasi ing <video> karo roller
  4. Aktifake autoplay tanpa swara lan daur ulang kanggo efek GIF

Google nduweni dokumentasi apik sing njlentrehake proses kasebut.

Iki 2019

Saiki wis 2019. Kemajuan terus maju, lan kita kudu ngetutake. Nganti saiki, kita duwe rong opsi codec sing didhukung ing kabeh browser lan alat enkoding video:

  1. H.264 - ngenalaken ing 2003 lan paling akeh digunakake saiki
  2. VP9 - muncul ing 2013 lan entuk dandan kompresi meh 50% dibandhingake karo H.264, sanajan nalika padha nulis ing kene ora kabeh ora tansah dadi rosy

Wigati: Sanajan H.265 minangka versi sabanjure H.264 lan bisa saingan karo VP9, ​​​​aku ora nganggep amarga dhukungan browser sing ora apik, kaya sing ditampilake ing kaca. https://caniuse.com/#feat=hevc. Biaya lisensi minangka alesan utama kenapa H.265 durung nyebar kaya H.264 lan kenapa konsorsium Alliance of Open Media nggarap codec bebas royalti, AV1.

Elinga, tujuan kita yaiku nyilikake GIF sing gedhe-gedhe dadi ukuran sing paling cilik kanggo nyepetake wektu loading. Bakal dadi aneh 2019 yen kita ora duwe standar anyar kanggo kompresi video ing arsenal kita. Nanging ana lan diarani AV1. Kanthi AV1 sampeyan bisa entuk kira-kira 30% perbaikan kompresi dibandhingake karo VP9. Lepota! 🙂

AV1 ana ing layanan sampeyan wiwit 2019!

Ing desktop

Dhukungan anyar kanggo dekoding video AV1 ditambahake menyang versi desktop Google Chrome 70 и Firefox 65. Saiki, dhukungan Firefox isih ana bug lan bisa nyebabake kacilakan, nanging kudu nambah kanthi tambahan dekoder dav1d wis ana ing Firefox 67 (wis dirilis, nanging support wis katon - kira-kira. transl.). Kanggo rincian babagan versi anyar waca - dav1d 0.3.0 release: malah luwih cepet!

Ing smartphone

Saiki ora ana dhukungan hardware kanggo smartphone amarga kekurangan dekoder sing cocog. Sampeyan bisa nindakake dekoding piranti lunak, sanajan iki bakal nambah konsumsi baterei. SOC seluler pisanan sing ndhukung dekoding hardware AV1 bakal katon ing 2020.

Banjur sing maca artikel kaya, "dadi yen ponsel durung ndhukung kanthi bener, kenapa nggunakake AV1?"

AV1 minangka codec sing cukup anyar, lan kita ana ing wiwitan adaptasi. Coba artikel iki minangka tahap "nalika sampeyan masak, wong akeh bakal ngetutake". Dhukungan desktop dhewe bakal nyepetake situs kanggo sawetara pamirsa. Lan codec lawas bisa digunakake minangka skenario mundur nalika AV1 ora didhukung ing piranti target. Nanging nalika pangguna pindhah menyang piranti kanthi dhukungan AV1, kabeh bakal siyap. Kanggo entuk iki, kita kudu nggawe tag video kaya ing ngisor iki, sing bakal ngidini browser milih format sing disenengi - AV1 - >> VP9 - >> H.264. Ya, yen pangguna duwe piranti utawa navigator sing lawas banget sing ora ndhukung video (sing ora mungkin karo H264), banjur dheweke mung bakal ndeleng 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>

Nggawe AV1

Nggawe video ing AV1 iku gampang. Download mbangun ffmpeg paling anyar kanggo sistem sampeyan saka kene lan gunakake prentah ing ngisor iki. Kita nggunakake 2 pass kanggo entuk bitrate target. Kanggo nindakake iki, kita bakal mbukak ffmpeg kaping pindho. Kaping pisanan kita nulis asil menyang file sing ora ana. Iki bakal nggawe log sing bakal dibutuhake kanggo ffmpeg kaping pindho.

# 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

Punika risak paramèter:

-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 - Включаем быстрый старт видео, перемещая часть данных в начало файла. Это позволит начать воспроизведение ещё до полной загрузка файла.

Nggawe GIF

Kanggo nggawe GIF aku nggunakake printah ing ngisor iki. Kanggo nyuda ukuran, Aku scaled GIF kanggo 720px sudhut lan 12 fps tinimbang asli 24 fps video.

./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

Asil tes

Luwih becik ndeleng sapisan tinimbang maca kaping satus, ta? Ayo priksa manawa AV1 minangka pilihan sing tepat kanggo tujuan kita. Aku njupuk video Tears Of Steel gratis sing kasedhiya ing kene https://mango.blender.org/, lan diowahi nggunakake kira-kira bitrate padha kanggo codec AV1, VP9, ​​H.264. Asil ana ing ngisor iki supaya sampeyan bisa mbandhingake dhewe.

Cathetan 1: Yen file ing ngisor iki ora dimuat kanggo sampeyan, bisa uga wektune nganyari browser sampeyan. Aku bakal nyaranake browser adhedhasar Chromium kayata Chrome, Vivaldi, Brave utawa Opera. Mangkene informasi paling anyar babagan dhukungan AV1 https://caniuse.com/#feat=av1

Cathetan 2: Kanggo Firefox 66 ing Linux sampeyan kudu nyetel gendera media.av1.enabled menyang makna true в about:config

Cathetan 3: Aku mutusake ora kalebu GIF biasa ing ngisor iki amarga ukurane gedhe lan jumlah data sing dibutuhake kanggo mbukak kaca iki! (Sing bakal dadi ironis, amarga kaca iki babagan ngurangi jumlah data ing sawijining kaca :)). Nanging sampeyan bisa ndeleng GIF pungkasan ing kene https://github.com/singhkays/its-time-replace-gifs-with-av1-video/blob/master/GIFs

Cathetan penerjemah: Habr ora ngidini sampeyan ngaktifake autoplay lan daur ulang file, supaya sampeyan mung bisa ngevaluasi kualitas. Sampeyan bisa ndeleng apa "gambar animasi" bakal katon urip ing artikel asli.

Adegan 1 @ 200 Kbps

Ana akeh gerakan ing kene, sing sensitif banget ing bitrate sing sithik. Sampeyan bisa langsung ndeleng sepira ala H.264 ing bitrate iki, kothak langsung katon. VP9 nambah kahanan sethitik, nanging kothak isih katon. AV1 menang kanthi jelas, ngasilake gambar sing luwih apik.

H.264

VP9

AV1

Adegan 2 @ 200 Kbps

Ana akeh konten CGI sing tembus ing kene. Asil ora beda kaya pungkasan, nanging sakabèhé AV1 katon luwih apik.

H.264

VP9

AV1

Adegan 3 @ 100 Kbps

Ing pemandangan iki, kita ngowahi bitrate nganti 100 Kbps lan asile konsisten. AV1 njaga kepemimpinane sanajan bitrate sithik!

H.264

VP9

AV1

Cherry ing jajan

Kanggo ngrampungake artikel iki kanthi ngrasakake jumlah bandwidth sing disimpen dibandhingake karo GIF - ukuran total kabeh video luwih dhuwur... 1.62 mb!! bener. Sawetara kurang ajar 1,708,032 bita! Kanggo mbandhingake, iki ukuran video GIF lan AV1 kanggo saben adegan

GIF
AV1

Adegan 1
11.7 MB
0.33 MB

Adegan 2
7.27 MB
0.18 MB

Adegan 3
5.62 MB
0.088 MB

Mung nggumunke! Dudu kuwi?

Wigati: Ukuran file VP9 lan H264 ora diwenehake, amarga meh ora beda karo AV1 amarga nggunakake bitrate sing padha. Iku bakal keluwih kanggo nambah rong kolom liyane karo ukuran padha, mung kanggo nyorot sing codecs iki gawé kualitas luwih apik tinimbang GIF ing ukuran file luwih cilik.

Source: www.habr.com

Add a comment