Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Videoelementin Lisääminen | Työskentely Median ja Taulukoiden Kanssa
HTML:n Perusteet

Videoelementin Lisääminen

Pyyhkäise näyttääksesi valikon

Voit upottaa vide tiedostoja verkkosivulle käyttämällä <video>-elementtiä. Tarkastele seuraavaa esimerkkiä:

index.html

index.html

Tässä esimerkissä:

  • <video>-elementti sisältää <source>-elementin, joka määrittää videon URL-osoitteen ja tiedostotyypin. Yleisesti tuetut muodot ovat WebM, MP4 ja OGG;
  • controls-attribuutti näyttää vakiotoistonhallintapainikkeet;
  • Jos käyttäjän selain ei tue videoelementtiä, näytetään varaviesti.

HTML-videoelementin yleisesti käytetyt attribuutit:

  • autoplay: käynnistää videon toiston heti sivun latauduttua;
  • loop: toistaa videon jatkuvasti uudelleen;
  • muted: mykistää äänen oletuksena;
  • volume: määrittää oletusäänenvoimakkuuden arvolla 0.0 (hiljainen) – 1.0 (täysi ääni);
  • poster: määrittää kuvan URL-osoitteen, jota näytetään videon esikatselukuvana ennen toiston alkamista;
  • width ja height: määrittävät videosoittimen leveyden ja korkeuden pikseleinä.

Esimerkki, jossa käytetään kaikkia näitä attribuutteja:

index.html

index.html

Note
Huomio

Lisäksi on olemassa monia JavaScript-kirjastoja ja rajapintoja, jotka tarjoavat lisätoiminnallisuuksia videon toistamiseen ja käsittelyyn verkossa.

question mark

Mitkä seuraavista ovat kelvollisia attribuutteja, joita voit käyttää HTML:n video-elementin kanssa?

Valitse kaikki oikeat vastaukset

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Osio 4. Luku 6
some-alt