În acest scurt articol mă voi concentra pe HLS, cel mai extins protocol de bitrate adaptiv pentru livrarea video. Voi răspunde la câteva dintre principalele întrebări pe care oricine le va considera HLS pentru prima dată probabil le va pune: ce este, când să îl folosești și cum să îl folosești.
Pentru a vă ajuta pe parcurs, voi arăta câteva exemple folosind un instrument de publicare video online pe care îl puteți folosi în mod liber pentru a testa performanța HLS pe cont propriu.
Ce este HLS și cum funcționează?
HLS este un protocol definit de Apple pentru a implementa un format de streaming de viteză de biți adaptiv care poate fi acceptat pe dispozitivele și software-ul lor. De-a lungul timpului, a obținut un sprijin larg.
Cea mai importantă caracteristică a HLS este capacitatea sa de a adapta bitrate-ul video la viteza reală a conexiunii. Acest lucru optimizează calitatea experienței.
Videoclipurile HLS sunt codificate în diferite redări la diferite rezoluții și rate de biți. Aceasta este denumită de obicei scara bitrate. Când o conexiune devine mai lentă, protocolul ajustează automat rata de biți solicitată la lățimea de bandă disponibilă.
Comparativ cu videoclipurile progresive, HLS evită efectele de re-tamponare și blocare, precum și umflarea conexiunii clientului. O putem vedea la lucru în acest videoclip.
În esență, HLS oferă o experiență de utilizare mult mai bună atunci când folosim conținut video în aplicațiile sau site-urile noastre.
Are suport nativ în iOS și Android. De asemenea, este acceptat de Safari, iar prin utilizarea unor JavaScript este acceptat în toate browserele principale (Chrome, Firefox, Edge). În timp ce utilizarea HLS necesită un efort, nu este o mare problemă.
Să vedem când ar trebui să-l folosim și cum.
Când ar trebui să folosim HLS?
Există cazuri în care videoclipurile nu sunt atât de grele. De exemplu, puteți avea o secvență de imagini codificate ca un videoclip de 1-2 secunde, cu o greutate mai mică de 1 MB. În acest caz, un videoclip progresiv – care poate fi consumat, ca o imagine, utilizând HTML5 simplu – este cu siguranță cea mai bună opțiune. HLS nu oferă niciun avantaj aici.
Dar HLS are sens atunci când vrem să livrăm videoclipuri de înaltă rezoluție (HD sau peste) cu o greutate de peste 3 MB. Acest tip de conținut poate distruge UX-ul nostru web atunci când este vizionat pe o conexiune mobilă medie.
Este demn de remarcat faptul că acesta este cazul într-o cantitate din ce în ce mai mare de conținut media, inclusiv multe videoclipuri scurte de mai puțin de 20 de secunde utilizate în contextele de comerț electronic și marketing. În exemplul de la începutul postării, avem un videoclip Full HD de doar 9 secunde, care are o greutate de peste 6 MB.
Cum putem folosi HLS pe site-urile noastre?
Pentru a utiliza HLS trebuie să abordăm o serie de aspecte. Mă voi concentra pe două puncte importante:
- nevoia de a codifica videoclipul și,
- nevoia de a-l încorpora în pagina noastră.
Pentru o imagine mai cuprinzătoare despre ceea ce presupune o conductă generală de publicare video, puteți consulta această postare.
Codificare HLS
Putem codifica videoclipuri în HLS intern sau utilizând un serviciu terță parte. Pentru a construi un codificator intern, cea mai bună opțiune este să folosiți FFMPEG, o bibliotecă open source puternică pentru procesare și codificare video. În acest caz, ar trebui să analizăm conținutul pe care urmează să îl codificăm și să setăm o serie de parametri.
În HLS ar trebui să definim o scară de bitrate (ratele de biți și rezoluțiile fiecărui pas) și lungimea bucăților. Când codificăm un videoclip, încheiem cu un set de liste de redare și bucăți. De obicei, încheiem primul cu .m3u8 și cel din urmă cu extensii .ts. Putem vedea un exemplu în imaginea următoare.
Putem vedea o listă de redare principală, o listă de redare suplimentară pentru fiecare interpretare și toate bucățile fiecărei interpretări. Lista de redare principală specifică scara bitrate și calea relativă la fiecare redare.
Apple face o recomandare generică care specifică scara bitrate și o durată a bucății de 10 secunde. Cu toate acestea, acest lucru nu este foarte util pentru multe tipuri de conținut, cum ar fi videoclipurile scurte obișnuite în comerțul electronic și marketing.
De fapt, cea mai bună abordare este de a regla scara bitrate în mod specific pentru conținutul videoclipului. În acest caz, dacă doriți să profitați la maximum de HLS și nu sunteți expert în codificare, un serviciu terț care oferă codificare pe titlu (cu HLS) este probabil alegerea corectă.
Jucători HLS
Aici, găsim două opțiuni principale. Ne putem lipi de playerul HTML5 sau putem folosi unul implementat în JavaScript.
Player HTML5
Versiunile recente de Safari acceptă HLS. În acest caz, puteți utiliza listele de redare HLS în același mod ca și videoclipurile progresive. Cu alte browsere, puteți utiliza o mică bibliotecă JavaScript pentru a implementa protocolul HLS și puteți utiliza din nou playerul HTML5 pentru videoclipuri progresive.
Acest lucru se poate face cu HLS.js. Această bibliotecă implementează doar negocierea redărilor, pe baza lățimii de bandă disponibile. Suportul este aproape universal, doar condiționat de suportul API-ului elementului media.
JavaScript Player
În cazul în care trebuie să personalizăm experiența video – ceea ce este destul de comun în paginile de marketing și povești – atunci trebuie să folosim altceva decât playerul HTML5 implicit.
Deși există multe opțiuni comerciale acolo, Video.js este o alegere bună. Este un player open source care acceptă un grad ridicat de personalizare, inclusiv diferite skin-uri și controale.
Un player precum Video.js acceptă, de asemenea, urmărirea evenimentelor legate de videoclipuri (cum ar fi acțiuni de redare sau pauză), astfel încât să le putem include în propriile noastre analize. De fapt, includerea acestor date în Google Analytics este foarte ușoară.
rezumat
Am abordat primele întrebări despre HLS pe care le vor avea majoritatea utilizatorilor potențiali: ce este și când ar trebui să-l folosim.
În timp ce o conductă de publicare video bazată pe HLS poate fi implementată și implementată intern cu instrumente open source precum FFMPEG și video.js, poate fi o idee bună să utilizați un serviciu de publicare video dacă nu ești expert în tehnologie. Acestea oferă funcții avansate precum codificarea pe titlu, au grijă de toată munca grea și ne permit să ne concentrăm asupra nevoilor noastre de personalizare.
