Kako vdelati video predvajalnik HTML5 na svoje spletno mesto s prilagodljivim pretakanjem HLS in DASH

Adobejev Flash Player se že dolgo uporablja kot primarni video predvajalnik za internet. Vladal je dolgo časa, nadomeščajo pa ga protokoli, ki so hitrejši, učinkovitejši in omogočajo lažje upravljanje datotek. Google Chrome je začel blokirati tudi Flash in bo kmalu popolnoma prenehal s podporo za Adobe Flash. Morda bo trajalo nekaj časa, da v celoti nadomestimo ta starejši protokol, vendar zagotovo prinaša njegove prednosti. Nekateri novejši brskalniki imajo vgrajeno podporo za HLS (HTTP Live Streaming).



HTML5 in HLS sta odprtokodna protokola, kar pomeni, da lahko vsakdo brezplačno spremeni svojo kodo in jo uporabi na svojem spletnem mestu. Kodiranje videoposnetka v več različnih standardov kakovosti predvajanja, priloženi napisi in optimizacija kakovosti videoposnetka glede na pasovno širino so brezšivni s pretakanjem videoposnetkov HLS. Zaradi izvornega HTML-ja tag, v kodi je pretakanje HTML5, kar omogoča enostavno pretakanje prek HLS in DASH. DASH in HLS razstavita video tok na majhne segmente, ki jih lahko uporabite za video predvajalnik HTML5. Skrajšajo čas, ki ga potrebujete za medpomnjenje videoposnetka, preden se začne predvajati, in morebitne težave z jecljanjem, na katere lahko naletite med gledanjem toka. Ugodnosti niso omejene le na gledalca, temveč tudi na ponudnika vsebin.

Vdelajte video predvajalnik HTML5 na svoje spletno mesto s pomočjo JWPlayerja

Preden začnemo, predlagamo, da dobite JWPlayer pri tukaj . Z naraščanjem HLS in DASH, ki se uporabljata za prilagodljivo pretakanje, se je pojavilo veliko video predvajalnikov, ki uporabnikom zagotovo zagotavljajo pravičen delež koristi. Eden takih predvajalnikov, ki se občasno soočajo z izzivi in ​​ga uporabljajo podobni ESPN in Sony Pictures, je JWPlayer. Nalaganje vsebine, vdelava video predvajalnika v HTML5, iOS, Android in Fire OS je enostavno z domačo kodo JWPlayer, ki si jo lahko prilagodite za še boljšo uporabniško izkušnjo. Toda danes se osredotočamo na video predvajalnike HTML5 in kako lahko uporabite HLS in DASH za boljše prilagodljivo pretakanje.



Kaj ponuja JW Player?

Poleg tega, da vam ponuja platformo za nalaganje videoposnetkov in njihovo uvrstitev na seznam predvajanja, vam JWPlayer omogoča tudi ogled sprotnih statistik naloženih videoposnetkov, tako da vam daje poročila o vaših urnikih oglasov in prilagojena poročila.



Prilagojena poročila



JWPlayer olajša upravljanje vsebin tudi za vaše spletno mesto, ki ga poganja CMS, tako da vam omogoča enostavno upravljanje z napisi, sličicami, metapodatki itd. Zato uporaba in prednosti JWPlayerja presegajo zgolj video predvajalnik za vdelavo vaših videoposnetkov HTML5.

Nalaganje videoposnetkov na JWPlayer

Naložite videoposnetke

Preden začnete vdelati JWPlayer na spletno mesto HTML5, je pomembno, da ustrezne videoposnetke najprej naložite na platformo JWPlayer. Na srečo to ni zelo zapletena naloga, saj morate le izbrati datoteko, ki jo želite naložiti.



Ko je videoposnetek naložen, lahko začnete urejati odsek z metapodatki omenjenega videoposnetka, si ogledujete analitiko in spremljate promet itd. Ali dobite vire za HLS in naložite podnapise z zavihka sredstev.

Prilagajanje video predvajalnika HLS in DASH

Pred vdelavo video predvajalnika morate na svoje spletno mesto dodati knjižnico predvajalnikov. Na ta način lahko dosežete tri načine. Samostojno, v oblaku in v oblaku s klici API. Razlika med gostovanjem v oblaku in gostovanjem v oblaku s klici API je preprosto na podlagi klicev API. Razvijalcem, ki želijo z izvajanjem svojega video predvajalnika upravljati prek klicev API, priporočamo, da to uporabljajo. Za samogostitelje različico predvajalnika v celoti nadzorujete vi. Pomembno je omeniti, da se licenca predvajalnika ne vrti samodejno in jo je treba ročno izvajati pri uporabi samostojnega gostitelja.

Prilagajanje predvajalnika v oblaku

Kot lahko vidite tukaj, lahko predvajalnik, ki ga gosti v oblaku, prilagodite in izpopolnite po svojih željah. Predvajalnik ima lahko na primer odzivno velikost ali fiksno velikost. Predvajanje lahko nastavite na zanko, izključite ga ob zagonu itd. Poleg tega lahko spremenite tudi privzeto barvo predvajalnika, priporočila video posnetkov in še veliko več.

Ko vse to odpravite, morate nato naložiti kodo knjižnice predvajalnika v oblaku na svojo spletno stran oznako, da boste lahko JWPlayer naložili na vaše spletno mesto.

Vdelava video predvajalnika

Privzeto ima JWPlayer samodejno raje predstavnostne mehanizme HTML5, tako da vam ni treba skrbeti za nastavitev primarne nastavitve. Vendar lahko v nekaterih primerih to spremenite. Ko se to zgodi, lahko predvajalnik prilagodite in nastavite po vaši meri.

Ko naložite knjižnico predvajalnika v oblaku na oznako vaše spletne strani, je naslednji korak nalaganje vdelane kode. Najprej ustvarite oznako v kjer se mora pojaviti JWPlayer. Pokliči nastaviti() z lastnostjo seznama predvajanja, da predvajalnik pokliče v ciljno .

Spodaj je primer vzorca nastaviti() koda, ki jo zagotovijo sami JWPlayer:

jwplayer ('myElement'). setup ({'playlist': 'https://example.com/myVideo.mp4