Video-elementti
video-elementti mahdollistaa videon lisäämisen HTML-sivulle.
Sen avulla voidaan myös hallita kyseistä videota.
Polku videotiedostoon määritetään
src-attribuutilla tai upotetulla source-elementillä.
Jos haluat nähdä toistimen videon toiston hallitsemiseksi
- tulee lisätä controls-attribuutti.
Ilman sitä et näe mitään - ääntä eikä kuvaa
myöskään tule.
Joskus videoiden sijoittaminen itse sivustolle ei ole
kovin kätevää (esimerkiksi, jos palvelinpalveluntarjoajallasi on
sivuston koolle rajoituksia). Tässä tapauksessa
video voidaan ladata YouTubeen ja upottaa
iframe-elementin avulla.
Attribuutit
| Attribuutti | Kuvaus |
|---|---|
src |
Määrittää polun videotiedostoon.
Mutta on parempi käyttää tähän source-elementtiä
(tällöin voidaan määrittää video useassa eri muodossa).
|
preload |
Käytetään videotiedoston lataamiseen samanaikaisesti verkkosivun latautumisen kanssa.
Hyväksytyt arvot: none (älä lataa tiedostoa, oletus),
metadata (lataa vain metatiedot: kesto jne.),
auto (lataa video kokonaan HTML-sivun latauksen yhteydessä).
|
autoplay |
Ääni alkaa soittaa heti sivun latauduttua,
jolloin preload-attribuuttia ei huomioida.
Attribuutti ilman arvoa. |
controls |
Lisää videon toistovalikon.
Attribuutti ilman arvoa. Oletusarvoisesti (jos attribuuttia ei ole) valikkoa ei lisätä. |
loop |
Toistaa äänitiedoston "loopilla":
päätyttyään se alkaa soittaa alusta.
Attribuutti ilman arvoa. Oletusarvoisesti (jos attribuuttia ei ole) tallenne toistuu vain 1 kerran.
|
poster |
Polku kuvaan, joka näytetään, kun videota ei ole saatavilla tai sitä ei toisteta.
Jos poster-attribuuttia ei ole määritetty, selain yrittää näyttää videon ensimmäisen kuvan.
|
height |
height-attribuutti määrittää videon toistoalueen korkeuden (pikseleinä
tai prosentteina).
Itse video muuttaa kokoa isommaksi tai pienemmäksi sopeuttaen annettuun korkeuteen,
mutta sen mittasuhteet eivät muutu.
Oletusarvo: korkeus otetaan videon parametreista, jos tätä arvoa ei ole saatavilla, height-attribuutin arvoksi
otetaan poster-attribuutin kuvan korkeus.
Jos poster-attribuuttia ei myöskään ole annettu - korkeus
asetetaan 150 pikseliin.
|
width |
width-attribuutti määrittää videon toistoalueen leveyden (pikseleinä
tai prosentteina).
Itse video muuttaa kokoa isommaksi tai pienemmäksi sopeuttaen annettuun leveyteen,
mutta sen mittasuhteet eivät muutu.
Oletusarvo: leveys otetaan videon parametreista, jos tätä arvoa ei ole saatavilla, width-attribuutin arvoksi
otetaan poster-attribuutin kuvan leveys.
Jos poster-attribuuttia ei myöskään ole annettu - leveys
asetetaan 150 pikseliin.
|
Esimerkki . Toistin verkkosivulla
Lisätään sivulle video toistimineen.
Niille selaimille, jotka eivät tue
video-elementtiä, on jätetty erityinen viesti
siitä:
<video src="moovie.mp4" controls>
Selaimesi ei tue video-elementtiä HTML5:ssä.
</video>
Esimerkki .
Lisätään video-elementille
source-elementti:
<video>
<source src="moovie.mp4" controls>
Selaimesi ei tue video-elementtiä HTML5:ssä.
</video>
