<video> Element - HTML

Her ses hvordan <video> elementet bruges til at lave en videoafspiller på hjemmesiden

Element og attributter

Her ses hvordan <video> bruges med tilhørende attributter.


<video> har de samme attributter som <audio> bortset fra poster, width og height som kun findes i <video>.
Attribut Betydning Mulige værdier
src sti til videofil som skal afspilles For eksempel :
videofil.ogv
videofil.mp4
videofil.webm
controls viser browserens standard afspiller [boolsk udtryk] 1
width videoens bredde i pixels For eksempel :
640
height videoens højde i pixels For eksempel :
480
poster billede som vises før videoen er hentet For eksempel :
billede.png
preload bestemmer om dele af filen skal hentes inden den afspilles auto = browseren bestemmer (hvilket gerne betyder at en del af lydfilen hentes så den er klar til afspilning)

metadata = henter kun data om varighed og lignende

none = henter ingen data
autoplay afspilningen starter automatisk [boolsk udtryk] 1
loop afspilningen starter forfra når slutningen er nået [boolsk udtryk] 1
autobuffer bruges ikke mere. Er blevet omdøbt til preload [boolsk udtryk] 1
muted slår lyden fra [boolsk udtryk] 1
audio Bruges ikke mere. Er blevet omdøbt til muted
mediagroup Bruges på flere audio/video elementer så de kan afspille synkront (en gruppe af medieelementer deler samme controls) Se også Mediagroup attribut.


1 Boolske udtryk kan både skrives som controls, controls="controls" eller controls="true".

Jeg vælger at bruge controls da jeg bruger HTML og det er mest simpelt.

Hvis man bruger XHTML skal attributten have tildelt en værdi som contols="controls" da tomme attributter ikke er tilladt i XHTML.

Eksempel

Her ses et simpelt eksempel på brug af <video>.

Element og attributter med source

Ved at bruge <video> sammen med flere <source> kan man angive flere videoformater så flest mulige browsere kan afspille videoen.
Når man bruger <source> skal man ikke bruge src attributten i <video>.

Når man bruger <source> så skal man ikke bruge src="filnavn" i <video>.

Eksempel med source

Ved at bruge <source> kan man angive flere kilder.
Så vil browseren afspille den første video hvis format den kan afspille.

Video med poster

Med poster attributten kan vi vise et billede før videoen er hentet og afspilles.
Det kunne for eksempel være en af de første frames i videoen så brugeren kan se hvordan videoen starter.

Sæt bredde og højde

Efter hvad jeg kan forstå så skal man sætte width og height til dimensionerne på videoen som den er originalt.
Derefter kan man så sætte størrelsen med CSS hvis man ønsker at skalere videoens størrelse i browseren.

Hvis vi har en video på 320 x 240 pixels og ønsker den skal fylde det hele kunne man skrive sådan her.

Type attributten

type attributten i <source> angiver filens MIME type.

Formålet med at angive filens MIME type er at browseren så ikke behøver downloade noget af filen for at finde ud af om den er i stand til at afspille den.

Her ses nogle eksempel.

Udover at angive MIME typen kan man også angive codecs som en del af type attributten.
Hvis man også angive codecs har browseren endnu bedre mulighed for at vide om den er i stand til at afspille filen.
codecs angiver hvilke codecs der er i containeren.

Her ses et eksempel med :
En OGG container med Theora video codec og Vorbis audio codec.
En WebM container med VP8 video codec og Vorbis audio codec.
En MPEG-4 container med H.264 video codec (baseline profil) og AAC audio codec (low-complexity profil).

H.264 og AAC har flere forskellige profiler.
Jo højere profil man bruger jo mere er dataene komprimeret som gør filen mindre men det bruger mere CPU tid at dekode dataene.

Her er mere info om codecs til MPEG-4 containere.


Man kan også bytte om på ' og " tegnene.
Det bestemmer man selv alt efter hvad man fortrækker.
Disse eksempler er også gyldige.

Næste side

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.