HLS-videostreaming: Hvad det er, og hvornår det skal bruges

I denne korte artikel vil jeg fokusere på HLS, den mest udvidede adaptive bitrate-protokol til videoudlevering. Jeg vil besvare nogle af de vigtigste spørgsmål, som enhver, der overvejer HLS for første gang, sandsynligvis vil stille: hvad det er, hvornår man skal bruge det, og hvordan man bruger det.

For at hjælpe undervejs vil jeg vise nogle eksempler ved hjælp af et online videoudgivelsesværktøj, som du frit kan bruge til at teste udførelsen af ​​HLS på egen hånd.

Hvad er HLS, og hvordan fungerer det?

HLS er en protokol, der er defineret af Apple til implementering af et adaptivt bitrate-streamingformat, der kan understøttes på deres enheder og software. Over tid har det fået bred støtte.

Det vigtigste ved HLS er dens evne til at tilpasse videohastigheden til den aktuelle forbindelseshastighed. Dette optimerer kvaliteten af ​​oplevelsen.

HLS-videoer er kodet i forskellige gengivelser i forskellige opløsninger og bithastigheder. Dette kaldes normalt bitrate-stigen. Når en forbindelse bliver langsommere, justerer protokollen automatisk den anmodede bithastighed til den tilgængelige båndbredde.

Sammenlignet med progressive videoer undgår HLS re-buffering og stalling af effekter samt opblødning af klientforbindelsen. Vi kan se det på arbejde i denne video.

I det væsentlige giver HLS en meget bedre brugeroplevelse, når vi bruger videoindhold i vores apps eller sider.

Det har indbygget support i iOS og Android. Det understøttes også af Safari, og ved at bruge noget JavaScript understøttes det i alle de vigtigste browsere (Chrome, Firefox, Edge). Mens brug af HLS kræver en vis indsats, er det ikke en big deal.

Lad os se, hvornår vi skal bruge det, og hvordan.

Hvornår skal vi bruge HLS?

Der er tilfælde, hvor videoer ikke er så tunge. For eksempel kan du have en sekvens af billeder kodet som en 1-2 sekunders video med en vægt på mindre end 1 MB. I dette tilfælde er en progressiv video - der kan forbruges som et billede ved hjælp af almindelig HTML5 - helt sikkert den bedste mulighed. HLS tilbyder ikke nogen fordel her.

Men HLS giver mening, når vi vil levere videoer i høj opløsning (HD eller derover) med en vægt på over 3 MB. Denne type indhold kan dræbe vores web-UX, når det vises på en gennemsnitlig mobilforbindelse.

Det er værd at bemærke, at dette er tilfældet i en stigende mængde medieindhold, herunder mange korte videoer på mindre end 20 sekunder, der bruges i e-handel og marketing sammenhænge. I eksemplet i starten af ​​indlægget har vi en fuld HD-video på kun 9 sekunder, der vejer ind over 6 MB.

Hvordan kan vi bruge HLS på vores websteder?

For at bruge HLS er vi nødt til at adressere en række aspekter. Jeg vil fokusere på to vigtige punkter:  

  • behovet for at kode videoen, og
  • behovet for at integrere det på vores side.

For et mere omfattende overblik over, hvad en generel videoudgivelsespipeline indebærer, kan du tjekke dette indlæg.

HLS-kodning

Vi kan kode videoer i HLS internt eller ved hjælp af en tredjepartstjeneste. For at opbygge en intern encoder er den bedste mulighed at bruge FFMPEG, et kraftfuldt open source-bibliotek til videobehandling og kodning. I dette tilfælde skal vi analysere det indhold, vi skal kode, og indstille et antal parametre.

I HLS skal vi definere en bitrate-stige (bitrate og opløsning for hvert trin) og længden af ​​bidder. Når vi koder en video, slutter vi med et sæt afspilningslister og bidder. Typisk slutter vi førstnævnte med .m3u8 og sidstnævnte med .ts-udvidelser. Vi kan se et eksempel i det næste billede.

Vi kan se en master-playliste, en ekstra playliste pr. Gengivelse og alle klumperne fra hver gengivelse. Masterafspilningslisten specificerer bitrate-stigen og den relative sti til hver gengivelse.

Apple fremsætter en generel anbefaling, der angiver bitrate-stigen og en varighed på 10 sekunder. Dette er dog ikke særlig nyttigt for mange typer indhold, som de korte videoer, der er almindelige inden for e-handel og marketing.

Faktisk er den bedste tilgang at indstille bitrate-stigen specifikt til indholdet af videoen. I dette tilfælde, hvis du vil få mest muligt ud af HLS, og du ikke er ekspert i kodning, er en tredjepartstjeneste, der leverer kodning pr. Titel (med HLS) sandsynligvis det rigtige valg.

HLS-spillere

Her finder vi to hovedmuligheder. Vi kan holde os til HTML5-afspilleren, eller vi kan bruge en implementeret i JavaScript.

HTML5-afspiller

Seneste Safari-versioner understøtter HLS. I dette tilfælde kan du bruge HLS-afspilningslister på samme måde som progressive videoer. Med andre browsere kan du bruge et lille JavaScript-bibliotek til at implementere HLS-protokollen og igen bruge HTML5-afspilleren til progressive videoer.

Dette kan gøres med HLS.js. Dette bibliotek implementerer bare forhandlingerne om gengivelser baseret på den tilgængelige båndbredde. Support er næsten universel, kun betinget af understøttelse af medieelementets API.

JavaScript-afspiller

Hvis vi har brug for at tilpasse videooplevelsen - som er ret almindelig på sider med marketing og historier - er vi nødt til at bruge noget andet end standard HTML5-afspilleren.

Mens der er mange kommercielle muligheder derude, er Video.js et godt valg. Det er en open source-afspiller, der understøtter en høj grad af tilpasning, herunder forskellige skind og kontroller.

En spiller som Video.js understøtter også sporing af videorelaterede begivenheder (som afspilning eller pause i handlinger), så vi kan inkludere dem i vores egen analyse. Faktisk er det virkelig nemt at medtage disse data i vores Google Analytics.

Resumé

Jeg har tacklet de første spørgsmål om HLS, som de fleste potentielle brugere vil have: hvad det er, og hvornår vi skal bruge det.

Mens en videoudgivelsesrørledning, der er afhængig af HLS, kan implementeres og implementeres internt med open source-værktøjer som FFMPEG og video.js, kan det være en god ide at bruge en videopubliceringstjeneste, hvis du ikke er ekspert inden for teknologien. De bringer avancerede funktioner som kodning pr. Titel, tager sig af alt det hårde arbejde, og lad os fokusere på vores tilpasningsbehov.