HTML5 video: Kako ugraditi video u vaš HTML

Prije HTML5, da biste mogli reproducirati videozapis na web stranici, trebali biste koristiti dodatak poput Adobe Flash Player. Uvođenjem HTML5 videozapise sada možete smještati izravno na samu stranicu.

To omogućuje reprodukciju videozapisa na stranicama dizajniranim za mobilne uređaje, jer dodaci poput Adobe Flash Player ne rade na Androidu ili iOS-u.

HTML element koristi se za ugrađivanje videozapisa u web dokumente. Može sadržavati jedan ili više video izvora, predstavljenih pomoću srcatributa ili elementa izvora.

Da biste ugradili video datoteku, samo dodajte ovaj isječak koda i promijenite srcput do vaše video datoteke:

   Your browser does not support the video element. Kindly update it to latest version. 

Element podržavaju svim modernim preglednicima. Međutim, ne podržavaju svi preglednici isti format video datoteke. MP4 datoteke su najprihvaćeniji format, a drugi formati poput WebM-a i Ogg-a podržani su u Chromeu, Firefoxu i Operi.

Da biste osigurali reprodukciju videozapisa u većini preglednika, najbolje je kodirati ih u formate Ogg i MP4 te ih uključiti u element kao u gornjem primjeru. Preglednici će koristiti prvi prepoznati format.

Ako iz nekog razloga preglednik ne prepozna nijedan format, umjesto njega prikazat će se tekst "Vaš preglednik ne podržava video element. Molimo ažurirajte ga na najnoviju verziju".

Također ste mogli primijetiti controlsna oznaci. Ovaj element uključuje puno korisnih atributa za prilagodbu iskustva reprodukcije.

atributi

controls

U controlsatributa ručke li kontrole, kao što su PLAY / PAUSE tipku ili volumen klizač pojaviti.

Ovo je logički atribut, što znači da se može postaviti na true ili false. Da biste ga postavili na true, jednostavno ga dodajte oznaci. Ako nije prisutan u oznaci, postavit će se na false i kontrole se neće pojaviti.

autoplay

"autoplay" se može postaviti na true ili false. Postavljate je na true dodavanjem u oznaku, ako nije u oznaci, postavlja se na false. Ako se postavi na Tačno, videozapis će se početi reproducirati čim se dovoljno videozapisa pohrani u bafer da bi se mogao reproducirati. Mnogi ljudi vide automatsku reprodukciju videozapisa ometajuće ili neugodno. Stoga koristite ovu značajku štedljivo. Također imajte na umu da neki mobilni preglednici, kao što je Safari za iOS, ignoriraju ovaj atribut.

Ovo je još jedan logički atribut. Uključivanjem autoplayu oznaku, ugrađeni videozapis započinje s reprodukcijom čim se dovoljno memorira.

Imajte na umu da mnogima automatska reprodukcija videozapisa smeta ili smeta, zato koristite ovu značajku štedljivo. Također imajte na umu da neki mobilni preglednici, poput Safari za iOS, u potpunosti ignoriraju ovaj atribut.

poster

posterAtribut je slika koja pokazuje na videu dok korisnik klikne na to igrati.

Videozapisi mogu biti skupi

Iako je videozapise na vašoj stranici jednostavnije nego ikad, često je bolje svoje videozapise prenijeti na uslugu kao što su YouTube, Vimeo ili Wistia i umjesto toga ugraditi njihov kôd. To je zato što posluživanje videozapisa može biti skupo, kako za vas u smislu troškova poslužitelja, tako i za gledatelje ako imaju ograničene podatkovne planove.

Hostiranje vlastitih video datoteka također može dovesti do problema s propusnošću, što može značiti mucanje sporog učitavanja videozapisa. Povrh toga, preglednici se obično razlikuju u kvaliteti što se tiče reprodukcije video zapisa, pa je teško kontrolirati što će točno gledatelji vidjeti. Također je vrlo jednostavno preuzeti videozapise ugrađene s oznakom, pa ako ste zabrinuti za piratstvo, možda biste trebali potražiti druge mogućnosti.

A uz to, krenite dalje i ugrađujte videozapise do mile volje. Ili ne - to je vaš poziv.