Kako ugraditi HTML5 Video Player na svoju web stranicu pomoću prilagodljivog streaminga HLS i DASH

Adobe-ov Flash Player već se dugo koristi kao primarni video uređaj za internet. Vladao je dugo vremena, ali zamjenjuju ga protokoli koji su brži, učinkovitiji i olakšavaju upravljanje datotekama. Google Chrome počeo je blokirati i Flash, a uskoro će potpuno prestati s podrškom za Adobe Flash. Možda će trebati neko vrijeme da u potpunosti zamijeni ovaj naslijeđeni protokol, ali sigurno donosi njegove prednosti. Neki od novijih preglednika imaju izvornu podršku za HLS (HTTP Live Streaming).



HTML5 i HLS su protokoli otvorenog koda, što znači da svatko može izmijeniti svoj kôd i koristiti ih na svojoj web stranici, potpuno besplatno. Kodiranje videozapisa u više različitih standarda kvalitete reprodukcije, priloženi titlovi i optimizacija kvalitete videozapisa u skladu s propusnošću postaju besprijekorni uz HLS streaming video zapisa. Zbog izvornog HTML-a Oznaka, HTML5 streaming dolazi u kodu, što olakšava streaming putem HLS-a i DASH-a. DASH i HLS raščlanjuju video stream na male segmente koji se mogu koristiti za HTML5 video uređaj. Smanjuju vrijeme potrebno za međuspremnik videozapisa prije nego što se počne reproducirati i sve probleme mucanja na koje biste mogli naići tijekom gledanja streama. Pogodnosti nisu ograničene samo na gledatelja, već se protežu i na davatelja sadržaja.

Ugradite HTML5 Video Player na svoje web mjesto pomoću JWPlayer-a

Prije nego što započnemo, predlažemo da nabavite JWPlayer od ovdje . Porastom HLS-a i DASH-a koji se koriste za potrebe prilagodljivog streaminga, pojavili su se mnogi video playeri koji korisnicima zasigurno pružaju njihov pošten udio u korist. JWPlayer je jedan takav igrač koji se s vremena na vrijeme suprotstavio izazovima, a koriste ga slični ESPN-u i Sony Picturesu. Prijenos sadržaja, ugrađivanje video uređaja u HTML5, iOS, Android i Fire OS olakšano je pomoću JWPlayer-ovog izvornog koda koji možete prilagoditi za još bolji korisnički doživljaj. Ali naš je fokus danas na HTML5 video uređajima i na tome kako možete koristiti HLS i DASH za bolji prilagodljivi streaming.



Što nudi JW Player?

Uz pružanje platforme za prijenos vaših videozapisa i njihovo stvaranje na popisu za reprodukciju, JWPlayer vam omogućuje i pregled statistike prenesenih videozapisa u stvarnom vremenu davanjem izvješća o rasporedima oglasa i prilagođenim izvješćima.



Prilagođena izvješća



JWPlayer olakšava upravljanje sadržajem i za vaše web stranice koje pokreće CMS, omogućavajući vam lako upravljanje naslovima, sličicama, metapodacima itd. Stoga se upotreba i prednosti JWPlayera protežu i dalje od samog reprodukcije video zapisa za ugrađivanje vaših HTML5 videozapisa.

Učitavanje videozapisa na JWPlayer

Prenesite videozapise

Prije nego što započnete s ugrađivanjem JWPlayer-a na vaše HTML5 web mjesto, važno je prvo prenijeti odgovarajuće videozapise na JWPlayer platformu. Srećom, to nije baš složen zadatak jer sve što trebate je odabrati datoteku koju želite prenijeti.



Nakon što se videozapis prenese, možete početi uređivati ​​odjeljak s metapodacima navedenog videozapisa, pregledavati analitiku i nadzirati promet itd. Ili dobiti izvore za HLS i prenijeti natpise s kartice sredstava.

Prilagođavanje HLS i DASH video playera

Prije ugrađivanja video playera prvo morate dodati biblioteku playera na svoje web mjesto. Postoje tri načina na koja možete postići ovaj podvig. Samo-hostirano, hostirano u oblaku i hostirano u oblaku s API pozivima. Razlika između hostinga u oblaku i hostinga u oblaku s API pozivima jednostavno se temelji na API pozivima. Razvojnim programerima koji žele upravljati implementacijom svog video playera putem API poziva, preporučuje se da to koriste. Za samostalne hostove, verziju playera u potpunosti kontrolirate vi. Važno je napomenuti da se licenca igrača ne rotira automatski i mora se raditi ručno kada se koristi samo-domaćin.

Prilagođavanje igrača smještenog u oblaku

Kao što ovdje možete vidjeti, igrač s hostingom u oblaku može se prilagoditi i polirati po vašem ukusu. Na primjer, igrač može imati odgovarajuću veličinu ili fiksnu veličinu. Reprodukcija se može postaviti na petlju, isključiti zvuk pri pokretanju itd. Nadalje, možete promijeniti i zadanu boju uređaja, preporuke videozapisa i još mnogo toga.

Nakon što sve ovo smanjite, tada morate prenijeti kôd biblioteke hostiranog u oblaku na web stranicu oznaka kako bi se JWPlayer učitao na vaše web mjesto.

Ugrađivanje video uređaja

Prema zadanim postavkama, JWPlayer automatski preferira HTML5 medijske mehanizme, tako da ne morate brinuti o postavljanju primarnih postavki. Međutim, neki slučajevi mogu tražiti da to promijenite. Kada se to dogodi, možete prilagoditi uređaj za reprodukciju i prilagoditi ga vašem načinu.

Nakon što prenesete biblioteku playera hostiranih u oblak na oznaku vaše web stranice, sljedeći je korak prijenos ugrađenog koda. Prvo stvorite a oznaka u gdje se mora pojaviti JWPlayer. Nazovite postaviti() sa svojstvom popisa za reprodukciju da pozove igrača u ciljanom .

Ispod je primjer uzorka postaviti() kôd koji pružaju sami JWPlayer:

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