Media, Images & Files

Kako odabrati pravi video kodek za reprodukciju na webu

Praktično stablo odluke o kodecima za timove kojima su važni kvaliteta, performanse, kompatibilnost i operativna održivost.

The Wux Webtools Team The Wux Webtools Team 10 min čitanja Pomoć AI, pregledano od strane ljudi
A stylized web video player surrounded by codec blocks, device icons, and a bandwidth graph.
Sadržaj
  1. Odabir kodeka je odluka o proizvodu, ne samo odluka o kompresiji
  2. Kratka verzija: što koristiti u 2026.
  3. Upoznajte četiri glavna web kodeka
  4. H.264: dosadan zadani izbor koji je i dalje važan
  5. AV1: učinkovit kodek sa stvarnim kompromisima
  6. VP9: i dalje koristan, manje uzbudljiv
  7. HEVC: tehnički snažan, operativno nezgrapan
  8. Počnite od publike, ne od tablice kodeka
  9. Uskladite odabir kodeka s modelom isporuke
  10. Jednostavno ugrađeni video
  11. Streaming i duga reprodukcija
  12. Ne zanemarujte hardversko dekodiranje
  13. Bitrate je i dalje važniji nego što timovi priznaju
  14. Containeri i MIME tipovi dio su posla
  15. Mjerite reprodukciju, ne samo brzinu stranice
  16. Praktično stablo odluke
  17. Razumna zadana preporuka

Odabir kodeka je odluka o proizvodu, ne samo odluka o kompresiji

O video kodecima lako je razgovarati loše. Netko usporedi AV1, H.264, VP9 i HEVC na grafikonu, pokaže na najmanju datoteku i proglasi pobjednika. Tako web reprodukcija ne funkcionira u produkciji.

Odluka o kodeku utječe na vrijeme pokretanja, međuspremanje, trajanje baterije, CDN trošak, kompatibilnost uređaja, infrastrukturu za enkodiranje, pravnu izloženost i zahtjeve podršci. “Najbolji” kodek za streaming servis s velikom farmom za enkodiranje nije nužno najbolji kodek za marketinšku stranicu s pet produktnih videa.

Korisno pitanje nije “koji je kodek najbolji?” Nego: koji kodek ovoj publici daje dobru reprodukciju uz najmanji operativni rizik?

Kratka verzija: što koristiti u 2026.

Za većinu web timova praktičan odgovor izgleda ovako:

  • Koristite H.264 kao osnovu. Star je, dovoljno učinkovit, široko hardverski dekodiran i još uvijek najsigurniji sloj kompatibilnosti.
  • Dodajte AV1 kada količina videa ili trošak propusnosti to opravdavaju. AV1 može pružiti izvrsnu kompresiju, posebno pri nižim brzinama prijenosa, ali enkodiranje je sporije, a stariji uređaji možda će se morati vratiti na rezervnu opciju.
  • Koristite VP9 uglavnom kada ga vaša publika i pipeline već favoriziraju. I dalje je koristan, osobito u WebM tijekovima rada i nekim Android/desktop okruženjima, ali AV1 je otvoreni kodek usmjereniji prema budućnosti.
  • Koristite HEVC oprezno na webu. Može biti privlačan za publiku koja većinom koristi Apple uređaje, ali podrška u preglednicima/platformama i složenost licenciranja čine ga lošim univerzalnim zadanim izborom.

To može zvučati konzervativno. I jest. Problemi s videom nisu suptilni. Ako se reprodukcija pokvari, korisnici se neće diviti vašem omjeru kompresije.

Upoznajte četiri glavna web kodeka

H.264: dosadan zadani izbor koji je i dalje važan

H.264, poznat i kao AVC, ostaje najsigurnija video osnova za web. Reproducira se gotovo svugdje: u desktop preglednicima, mobilnim preglednicima, pametnim televizorima, starijim uređajima, ugrađenim objavama na društvenim mrežama i webviewovima nativnih aplikacija.

Njegove su prednosti jednostavne:

  • Vrlo široka podrška
  • Zreli alati za enkodiranje
  • Pouzdano hardversko dekodiranje
  • Dobro ponašanje baterije na mobilnim uređajima
  • Predvidljiva podrška za streaming

Njegove su slabosti također jasne. Nije toliko kompresijski učinkovit kao AV1 ili HEVC. Na istoj razini kvalitete H.264 obično treba više bitova. Ako poslužujete velike količine videa, ta razlika postaje stvaran CDN trošak.

Ipak, za kratke isječke, produktne videe, dokumentacijske videe i stranice s niskim do umjerenim prometom, H.264 je obično pravi prvi encode.

AV1: učinkovit kodek sa stvarnim kompromisima

AV1 je najjači izbor otvorenog kodeka za modernu web isporuku. Često pruža bolju kvalitetu od H.264 i VP9 pri istoj brzini prijenosa, posebno za korisnike s manjom propusnošću. Zato je privlačan streaming platformama, izdavačima s mnogo medijskog sadržaja, obrazovnim stranicama i svakom timu koji ozbiljno pazi na trošak prijenosa.

Ali AV1 nije besplatan. Enkodiranje je računalno zahtjevno, iako su se moderni enkoderi i hardversko ubrzanje znatno poboljšali. Podrška za reprodukciju također ovisi o uređaju. Noviji desktopi, Android uređaji i televizori sve su sposobniji; stariji telefoni i prijenosnici možda nemaju učinkovito hardversko dekodiranje.

Praktično pravilo: AV1 je izvrstan kao dodatna izvedba, ne kao jedina izvedba. Uparite ga s H.264 rezervnom opcijom osim ako vrlo strogo kontrolirate okruženje reprodukcije.

Ova je odluka slična odabiru formata za statične slike: bolja kompresija korisna je samo kada podrška, vrijeme enkodiranja i kvaliteta izdrže u stvarnom svijetu. Isto razmišljanje o kompromisima vrijedi i za odluke o formatima slika poput AVIF u odnosu na WebP.

VP9: i dalje koristan, manje uzbudljiv

VP9 je bio glavna otvorena alternativa prije nego što je AV1 sazrio. Može biti mnogo učinkovitiji od H.264 i ima solidnu podršku u mnogim Chromium preglednicima, Firefoxu, Android okruženjima i nekim TV platformama.

VP9 i dalje ima smisla ako:

  • Već imate VP9 pipeline za enkodiranje
  • Vaša publika uglavnom koristi Chrome, Firefox, Android ili smart TV
  • Trebate WebM isporuku
  • Trošak AV1 enkodiranja još nije prihvatljiv

Za novi pipeline u 2026., međutim, VP9 je teže opravdati kao dugoročni napredni kodek. Ako idete dalje od H.264, AV1 je obično bolja strateška oklada.

HEVC: tehnički snažan, operativno nezgrapan

HEVC, poznat i kao H.265, učinkovit je i široko se koristi u nekim ekosustavima. Posebno je relevantan na Apple uređajima, gdje je hardverska podrška česta.

Problem nije kvaliteta. Problem je web praktičnost. Podrška u preglednicima povijesno je bila fragmentirana, licenciranje je složenije nego kod otvorenih kodeka, a ponašanje na različitim platformama može biti neujednačeno. HEVC može biti pametan dodatak za publiku koja većinom koristi Apple uređaje ili za tijekove rada bliske nativnim aplikacijama, ali rijetko je najčišći univerzalni zadani izbor za web.

Ako vaša analitika pokazuje izrazito Safari/iOS/macOS publiku, HEVC možda vrijedi testirati. Ako trebate jedan napredni kodek za široki web, radije odaberite AV1.

Počnite od publike, ne od tablice kodeka

Prije odabira formata odgovorite na tri pitanja iz vlastite analitike:

  1. Koji preglednici i uređaji zaista gledaju vaš video? Desktop Chrome nije isto što i jeftiniji Android, Safari na iPhoneu, preglednici unutar aplikacija ili pametni televizori.
  2. Koliko su videozapisi dugi? Hero petlja od 12 sekundi i lekcija od 90 minuta imaju vrlo različitu ekonomiku.
  3. Koliko videa korisnici zaista konzumiraju? Prikazi stranice nisu vrijeme gledanja. Uštede propusnosti najviše znače kada ljudi gledaju dovoljno sekundi da kodek postane važan.

Ako je vaš video promet malen, dobro komprimirani H.264 MP4 može biti dovoljan. Ako je video središnji dio proizvoda, koristite više izvedbi i moderne kodeke.

Uskladite odabir kodeka s modelom isporuke

Jednostavno ugrađeni video

Za malu stranicu s nekoliko videa počnite s:

  • H.264 video
  • AAC audio
  • MP4 container
  • Razumnom rezolucijom i brzinom prijenosa
  • Poster slikom
  • Lazy loadingom gdje je prikladno

Ova kombinacija nije glamurozna, ali radi. Po želji možete dodati AV1 ili VP9 kao WebM izvor prije MP4 rezervne opcije:

<video controls preload="metadata" poster="poster.jpg">
  <source src="demo-av1.webm" type="video/webm; codecs=av01.0.05M.08">
  <source src="demo-h264.mp4" type="video/mp4; codecs=avc1.4d401f, mp4a.40.2">
</video>

Preglednik će odabrati prvi izvor koji može reproducirati. Testirajte to na stvarnim uređajima, ne samo na razvojnom prijenosniku.

Streaming i duga reprodukcija

Za dulji sadržaj adaptivni bitrate streaming važniji je od bilo kojeg pojedinačnog kodeka. HLS i MPEG-DASH omogućuju playeru prebacivanje između razina kvalitete ovisno o mrežnim i uređajnim uvjetima.

Praktična streaming ljestvica mogla bi uključivati:

  • H.264 izvedbe za široku kompatibilnost
  • AV1 izvedbe za sposobne moderne klijente
  • Više rezolucija i brzina prijenosa
  • Odvojene audio izvedbe gdje je korisno
  • Veličine segmenata podešene za pokretanje i ponašanje pri prebacivanju

Odabir kodeka i dizajn bitrate ljestvice treba testirati zajedno. Prekrasan AV1 encode na jednoj brzini prijenosa ne pomaže ako je pokretanje sporo, segmenti su preveliki ili uređaji srednje klase teško dekodiraju video.

Ne zanemarujte hardversko dekodiranje

Kodek podržan softverski nije isto što i kodek koji je dobro podržan. Softversko dekodiranje može povećati korištenje CPU-a, prazniti bateriju i uzrokovati ispuštene frameove. To je posebno važno za mobilne korisnike, prijenosnike na bateriji i 4K reprodukciju.

Pri testiranju pratite:

  • Korištenje CPU-a i GPU-a
  • Pražnjenje baterije
  • Ispuštene frameove
  • Buku ventilatora na prijenosnicima
  • Zagrijavanje telefona
  • Kašnjenje pri pokretanju
  • Odzivnost premotavanja

Tu “najbolja kompresija” može izgubiti od “dovoljno dobro i hardverski dekodirano”. Veća H.264 datoteka koja se reproducira glatko može biti bolja od manje AV1 datoteke koja troši korisnikovu bateriju na starijem hardveru.

Bitrate je i dalje važniji nego što timovi priznaju

Odabir kodeka ne spašava nemarnu bitrate ljestvicu. Mnogi web videozapisi rasipni su jer se izvoze s postavkama produkcijskog mastera i učitavaju bez razumnog plana isporuke.

Kao okvirna polazna točka za H.264 SDR web reprodukciju:

  • 720p: oko 2–4 Mbps
  • 1080p: oko 4–8 Mbps
  • 4K: oko 12–25 Mbps

AV1 i HEVC često mogu ići niže uz sličnu percipiranu kvalitetu, ali sadržaj je važan. Snimka osobe koja govori komprimira se drugačije od snimke igre, snimki zaslona, animacije, sporta ili zrnastog filma.

Uvijek testirajte vizualno. Metrike kompresije pomažu, ali ljudska percepcija odlučuje je li video prihvatljiv.

Containeri i MIME tipovi dio su posla

Kodek nije format datoteke. H.264 se obično isporučuje u MP4. AV1 se može isporučivati u WebM ili MP4, ovisno o ciljanoj podršci i pipelineu. VP9 je obično WebM. Važan je i odabir audio kodeka: AAC ostaje siguran zadani izbor za MP4 audio, dok je Opus izvrstan u WebM tijekovima rada.

Poslužujte ispravne MIME tipove. Provjerite rade li range requests. Namjerno konfigurirajte cacheiranje. Neispravna zaglavlja mogu uzrokovati neuspjeh premotavanja videa ili prisiliti nepotrebna ponovna preuzimanja. Ako se video u produkciji ponaša drugačije nego lokalno, pregledajte stvarni HTTP odgovor; pristup iz debugiranja redirecta i HTTP zaglavlja u produkciji izravno se primjenjuje na isporuku medija.

Mjerite reprodukciju, ne samo brzinu stranice

Opće ocjene performansi mogu označiti teške stranice, ali neće u potpunosti objasniti video iskustvo. Pratite signale specifične za video:

  • Vrijeme do prvog framea
  • Kašnjenje pri pokretanju
  • Omjer ponovnog međuspremanja
  • Prosječna isporučena brzina prijenosa
  • Ispuštene frameove
  • Stopa pogrešaka po pregledniku i uređaju
  • Vrijeme gledanja i točke odustajanja

Audit stranice i dalje je koristan za okolne probleme: prevelike poster slike, skripte koje blokiraju renderiranje, loš lazy loading i pomake layouta oko playera. Ako vaš tim koristi Lighthouse kao prvi prolaz, čitajte ga kao alat za prioritizaciju, a ne kao presudu; Lighthouse izvješća treba tumačiti, osobito na stranicama bogatim medijima.

Praktično stablo odluke

Koristite ovo kao polaznu točku:

  1. Trebate maksimalnu kompatibilnost? Koristite H.264 MP4.
  2. Poslužujete mnogo minuta videa po korisniku? Dodajte AV1 izvedbe gdje su podržane.
  3. Publika su većinom Apple uređaji? Razmotrite HEVC kao dodatnu izvedbu, ne kao jedinu.
  4. Već ste uložili u VP9? Zadržite ga ako dobro radi; ne migrirajte žurno bez dokaza.
  5. Dugi sadržaj ili promjenjive mreže? Koristite adaptivni streaming prije nego što se opsesivno usredotočite na jedan kodek.
  6. Publika na slabijim mobilnim uređajima? Dajte prednost hardverski dekodiranim formatima i konzervativnim brzinama prijenosa.
  7. Kratak dekorativni video? Razmotrite treba li to uopće biti video. Statična slika, animacija ili kraća petlja mogu biti bolji.

<!-- tool-cta:start -->

💡 Isprobajte ovo: Testirajte kako različiti kodeci rade s vašim sadržajem pomoću Video Converter, kako bi se vaša odluka temeljila na stvarnom izlazu, a ne na generičkim benchmarkovima.

<!-- tool-cta:end -->

Razumna zadana preporuka

Ako danas gradite ili osvježavate web video pipeline, počnite ovdje:

  • Enkodirajte pouzdanu H.264/AAC MP4 rezervnu opciju.
  • Dodajte AV1 za preglednike i uređaje koji od njega imaju koristi.
  • Koristite adaptivni streaming za dugi sadržaj.
  • Testirajte na stvarnim uređajima, uključujući stariji i slabiji hardver.
  • Nakon lansiranja pratite pogreške reprodukcije i međuspremanje.

Odabir kodeka nije jednokratna izjava. To je odluka o održavanju. Podrška preglednika se poboljšava, hardver se mijenja, alati za enkodiranje postaju brži, a vaša se publika mijenja. Povremeno preispitajte odluku, ali ne jurite za svakom najavom novog kodeka. Pravi kodek je onaj koji vaši korisnici mogu reproducirati glatko, uz prihvatljivu kvalitetu, bez rasipanja propusnosti ili činjenja vašeg sustava isporuke krhkim.

Često postavljana pitanja

Trebam li zamijeniti sve H.264 videozapise s AV1?
Obično ne. AV1 je snažna dodatna izvedba, posebno za video s velikim prometom ili dugi sadržaj, ali H.264 je i dalje najsigurnija rezervna opcija za starije uređaje i široku kompatibilnost preglednika.
Je li HEVC bolji od AV1 za web reprodukciju?
Općenito nije. HEVC može dobro funkcionirati za publiku koja većinom koristi Apple uređaje i ima dobru kompresiju, ali podrška i složenost licenciranja u mnogim slučajevima čine AV1 čišćim naprednim kodekom za otvoreni web.
Trebam li adaptivni streaming za kratke videozapise na web stranici?
Obično ne. Za kratke demonstracije proizvoda, izjave korisnika i hero videozapise često je dovoljna dobro enkodirana MP4 rezervna opcija plus opcionalni moderni izvor. Adaptivni streaming postaje vredniji za dulje videozapise i promjenjive mrežne uvjete.
Koji je najsigurniji video format za web stranicu?
MP4 datoteka s H.264 videom i AAC audiom i dalje je najsigurniji izbor opće namjene. Nije uvijek najmanja, ali je široko podržana i predvidljiva.
Kako trebam testirati odabir kodeka?
Testirajte na stvarnim preglednicima i uređajima. Provjerite kašnjenje pri pokretanju, ispuštene frameove, korištenje CPU-a, ponašanje baterije, premotavanje, međuspremanje i pogreške reprodukcije. Sama veličina datoteke nije dovoljna.

Izvori i daljnje čitanje

  1. MDN: Web video codec guide
  2. Can I use: AV1 video format
  3. Apple: HLS Authoring Specification for Apple Devices
  4. W3C: Media Source Extensions
O autoru
The Wux Webtools Team

Zadnje ažurirano:

Nastavite čitati