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

bookVideoelementin Lisääminen

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

index.html

index.html

copy

Tässä esimerkissä:

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

HTML-videoelementin yleisesti käytetyt attribuutit sisältävät:

  • 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 toistoa;
  • width ja height: määrittävät videosoittimen leveyden ja korkeuden pikseleinä.

Tässä esimerkki, jossa käytetään kaikkia näitä attribuutteja:

index.html

index.html

copy
Note
Huomio

Lisäksi on saatavilla monia JavaScript-kirjastoja ja rajapintoja, jotka tarjoavat lisäominaisuuksia videon toistoon ja käsittelyyn verkossa.

question mark

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

Select the correct answer

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

bookVideoelementin 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

copy

Tässä esimerkissä:

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

HTML-videoelementin yleisesti käytetyt attribuutit sisältävät:

  • 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 toistoa;
  • width ja height: määrittävät videosoittimen leveyden ja korkeuden pikseleinä.

Tässä esimerkki, jossa käytetään kaikkia näitä attribuutteja:

index.html

index.html

copy
Note
Huomio

Lisäksi on saatavilla monia JavaScript-kirjastoja ja rajapintoja, jotka tarjoavat lisäominaisuuksia videon toistoon ja käsittelyyn verkossa.

question mark

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

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 6
some-alt