HTML5-video: Sådan integreres video i din HTML

Før HTML5, for at kunne afspille en video på en webside, skal du bruge et plugin som Adobe Flash Player. Med introduktionen af ​​HTML5 kan du nu placere videoer direkte på selve siden.

Dette gør det muligt at få videoer afspillet på sider, der er designet til mobile enheder, da plugins som Adobe Flash Player ikke fungerer på Android eller iOS.

HTML- elementet bruges til at integrere video i webdokumenter. Det kan indeholde en eller flere videokilder, repræsenteret ved hjælp af srcattributten eller kildeelementet.

For at integrere en videofil skal du blot tilføje dette kodestykke og ændre srcstien til din videofil:

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

Det element understøttes af alle moderne browsere. Imidlertid understøtter ikke alle browsere det samme videofilformat. MP4-filer er det mest accepterede format, og andre formater som WebM og Ogg understøttes i Chrome, Firefox og Opera.

For at sikre, at din video afspilles i de fleste browsere, er det den bedste praksis at kode dem i både Ogg- og MP4-formater og inkludere begge i elementet som i eksemplet ovenfor. Browsere bruger det første anerkendte format.

Hvis browseren af ​​en eller anden grund ikke genkender nogen af ​​formaterne, vises teksten "Din browser understøtter ikke videoelementet. Opdater det venligst til den nyeste version" i stedet.

Du har måske også bemærket det controlsi tagget. Dette element indeholder mange nyttige attributter til at tilpasse afspilningsoplevelsen.

egenskaber

controls

De controlsattribut håndtag, om kontrollen såsom afspil / pause-knap eller volumen skyderen vises.

Dette er en boolsk attribut, hvilket betyder, at den kan indstilles til enten sand eller falsk. For at indstille det til sandt skal du blot tilføje det til tagget. Hvis det ikke er til stede i tagget, sættes det til falsk, og kontrollerne vises ikke.

autoplay

"autoplay" kan indstilles til enten sand eller falsk. Du indstiller det til sandt ved at tilføje det til tagget, hvis det ikke er til stede i tagget, er det indstillet til false. Hvis den er sat til sand, begynder videoen at afspilles, så snart nok af videoen er bufret til, at den kan afspilles. Mange mennesker finder automatisk afspilning af videoer som forstyrrende eller irriterende. Så brug denne funktion sparsomt. Bemærk også, at nogle mobilbrowsere, såsom Safari til iOS, ignorerer denne attribut.

Dette er en anden boolsk egenskab. Ved at medtage autoplayi tagget begynder den indlejrede video at spille, så snart nok af den er bufret.

Husk, at mange mennesker finder automatisk afspilning af videoer forstyrrende eller irriterende, så brug denne funktion sparsomt. Bemærk også, at nogle mobilbrowsere som Safari til iOS ignorerer denne attribut helt.

poster

Den posterattribut er det billede, der viser på videoen indtil brugeren klikker for at afspille den.

Videoer kan være dyre

Selvom det er lettere end nogensinde før at inkludere videoer på din side, er det ofte bedre at uploade dine videoer til en tjeneste som YouTube, Vimeo eller Wistia og i stedet integrere deres kode. Dette skyldes, at visning af videoer kan være dyrt, både for dig med hensyn til serveromkostninger og for dine seere, hvis de har begrænsede dataplaner.

At hoste dine egne videofiler kan også føre til problemer med båndbredde, hvilket kan bety stammen af ​​videoer med langsom indlæsning. Derudover har browsere en tendens til at variere i kvalitet, når det kommer til videoafspilning, så det er svært at kontrollere præcis, hvad dine seere vil se. Det er også meget let at downloade videoer, der er integreret med tagget, så hvis du er bekymret for piratkopiering, vil du måske undersøge andre muligheder.

Og med det skal du gå ud og integrere videoer efter dit hjertes indhold. Eller ikke - det er dit opkald.