HTML5-video: kuidas video HTML-i lisada

Veebilehel video esitamiseks peate enne HTML5-d kasutama sellist pistikprogrammi nagu Adobe Flash Player. HTML5 kasutuselevõtuga saate nüüd videod paigutada otse lehele.

See võimaldab videoid esitada lehtedel, mis on mõeldud mobiilseadmetele, kuna pluginad nagu Adobe Flash Player ei tööta Androidi ega iOS-i puhul.

HTML- elementi kasutatakse video sisestamiseks veebidokumentidesse. See võib sisaldada ühte või mitut videoallikat, mis on kujutatud srcatribuudi või allikaelemendi abil.

Videofaili manustamiseks lisage lihtsalt see koodilõik ja muutke srcoma videofaili teele:

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

Element toetab kõiki kaasaegseid brausereid. Kuid mitte kõik brauserid ei toeta sama videofailivormingut. MP4-failid on kõige laialdasemalt aktsepteeritud vorming ning Chrome'is, Firefoxis ja Operas toetatakse muid vorminguid, nagu WebM ja Ogg.

Teie video esitamise tagamiseks enamikus brauserites on parim tava kodeerida need nii Ogg- kui MP4-vormingutesse ja lisada mõlemad elemendisse, nagu ülaltoodud näites. Brauserid kasutavad esimest tunnustatud vormingut.

Kui brauser mingil põhjusel ühtegi vormingut ei tunnista, kuvatakse selle asemel tekst "Teie brauser ei toeta videoelementi. Palun värskendage seda uusimale versioonile".

Samuti võis märgata controlska tag. See element sisaldab palju kasulikke atribuute taasesituse kogemuse kohandamiseks.

atribuudid

controls

controlsAtribuut käepidemed, kas kontrolli nagu play / pause nuppu või helitugevuse liugurit ilmuvad.

See on tõeväärtuse atribuut, mis tähendab, et selle saab määrata kas tõeseks või valeks. Selle õigeks seadmiseks lisage see lihtsalt märgendile. Kui seda märgendis pole, määratakse see valeks ja juhtnuppe ei kuvata.

autoplay

Automaatse esituse saab seada kas tõele või valele. Selle määrate väärtuseks Tõene, lisades selle sildile. Kui seda märgendis pole, on see väärtus Väär. Kui see on tõene, siis hakatakse videot esitama niipea, kui videost on puhverdatud, et seda saaks esitada. Paljud inimesed leiavad, et videote automaatne esitamine on häiriv või tüütu. Nii et kasutage seda funktsiooni säästlikult. Pange tähele ka seda, et mõned mobiilibrauserid, näiteks iOS-i jaoks mõeldud Safari, eiravad seda atribuuti.

See on veel üks tõeväärtuse atribuut. Autor sealhulgas autoplayka tag, varjatud video hakkab mängima niipea, kui piisavalt on puhverdatud.

Pidage meeles, et paljudel inimestel on videote automaatne esitamine häiriv või tüütu, seega kasutage seda funktsiooni säästlikult. Pange tähele ka seda, et mõned mobiilibrauserid, näiteks iOS-i Safari, ignoreerivad seda atribuuti täielikult.

poster

posterAtribuut on kujutis, mis näitab video kuni kasutaja klõpsab mängida.

Videod võivad olla kallid

Kuigi videote lisamine oma lehele on lihtsam kui kunagi varem, on sageli parem videod üles laadida sellisesse teenusesse nagu YouTube, Vimeo või Wistia ja manustada nende kood. Seda seetõttu, et videote esitamine võib olla kulukas nii teie jaoks kui serveri kulude osas, kui ka vaatajatele, kui neil on piiratud andmesidepakett.

Oma videofailide majutamine võib põhjustada ka ribalaiusega probleeme, mis võib tähendada aeglase laadimisega videote kokutamist. Pealegi on brauserite video taasesituse kvaliteet varieeruv, seega on raske kontrollida, mida teie vaatajad täpselt näevad. Samuti on märgendiga varjatud videote allalaadimine väga lihtne , nii et kui olete piraatlusega seotud, võiksite uurida muid võimalusi.

Ja sellega minge välja ja kinnitage videod oma südames. Või mitte - see on teie kõne.