Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Äänen ja Videon Upottaminen Rikasta Mediaa Sisältöä Varten | Työskentely Median ja Taulukoiden Kanssa
HTML:n Perusteet

bookÄänen ja Videon Upottaminen Rikasta Mediaa Sisältöä Varten

Äänen upottaminen

Voit käyttää <audio> elementtiä lisätäksesi äänitiedostoja verkkosivulle. Tarkastellaan esimerkkiä:

index.html

index.html

copy

Tässä esimerkissä:

  • <audio> elementti sisältää <source> elementin, joka määrittää äänitiedoston URL-osoitteen ja tiedostotyypin. Yleisesti tuetut muodot ovat MP3 ja OGG;
  • controls attribuutti näyttää vakiotoiston hallintalaitteet, kuten toisto, tauko ja äänenvoimakkuus;
  • Jos käyttäjän selain ei tue audioelementtiä, näytetään varaviesti.

HTML-audioelementin kanssa yleisesti käytettyjä lisäattribuutteja ovat:

  • autoplay: aloittaa äänitiedoston toiston heti, kun sivu latautuu;
  • loop: saa äänitiedoston toistumaan jatkuvasti;
  • muted: mykistää äänen oletuksena;
  • volume: määrittää äänitiedoston oletusäänenvoimakkuuden, joka vaihtelee välillä 0.0 (hiljainen) - 1.0 (täysi äänenvoimakkuus).

Tässä on esimerkki, joka havainnollistaa kaikkien näiden attribuuttien käyttöä:

index.html

index.html

copy

Videon upottaminen

Voit upottaa videotiedostoja 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 URL-osoitteen ja tiedostotyypin. Yleisesti tuettuja formaatteja ovat WebM, MP4 ja OGG;
  • controls-attribuutti näyttää standardin toistonhallinnan;
  • Jos käyttäjän selain ei tue videoelementtiä, näytetään varaviesti.

HTML-videoelementin yleisesti käytettyjä attribuutteja ovat:

  • autoplay: aloittaa videon toiston heti, kun sivu latautuu;
  • loop: saa videon toistumaan jatkuvasti;
  • muted: mykistää äänen oletuksena;
  • volume: määrittää oletusäänenvoimakkuuden tasolle äänitiedostolle, vaihdellen 0.0 (hiljainen) ja 1.0 (täysi äänenvoimakkuus) välillä;
  • poster: määrittää kuvan URL-osoitteen, joka näytetään videon pikkukuvana ennen kuin video toistetaan;
  • width ja height: määrittää videon toistimen leveyden ja korkeuden pikseleinä.

Tässä on esimerkki, joka havainnollistaa kaikkien näiden attribuuttien käyttöä:

index.html

index.html

copy

Huomautus

Lisäksi on olemassa monia JavaScript-kirjastoja ja API:ita, jotka tarjoavat lisätoimintoja videon toistamiseen ja käsittelyyn verkossa.

question mark

Mikä seuraavista väitteistä HTML:n <audio> ja <video> elementeistä on totta?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 5

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

Suggested prompts:

Kysy minulta kysymyksiä tästä aiheesta

Tiivistä tämä luku

Näytä käytännön esimerkkejä

Awesome!

Completion rate improved to 2.56

bookÄänen ja Videon Upottaminen Rikasta Mediaa Sisältöä Varten

Pyyhkäise näyttääksesi valikon

Äänen upottaminen

Voit käyttää <audio> elementtiä lisätäksesi äänitiedostoja verkkosivulle. Tarkastellaan esimerkkiä:

index.html

index.html

copy

Tässä esimerkissä:

  • <audio> elementti sisältää <source> elementin, joka määrittää äänitiedoston URL-osoitteen ja tiedostotyypin. Yleisesti tuetut muodot ovat MP3 ja OGG;
  • controls attribuutti näyttää vakiotoiston hallintalaitteet, kuten toisto, tauko ja äänenvoimakkuus;
  • Jos käyttäjän selain ei tue audioelementtiä, näytetään varaviesti.

HTML-audioelementin kanssa yleisesti käytettyjä lisäattribuutteja ovat:

  • autoplay: aloittaa äänitiedoston toiston heti, kun sivu latautuu;
  • loop: saa äänitiedoston toistumaan jatkuvasti;
  • muted: mykistää äänen oletuksena;
  • volume: määrittää äänitiedoston oletusäänenvoimakkuuden, joka vaihtelee välillä 0.0 (hiljainen) - 1.0 (täysi äänenvoimakkuus).

Tässä on esimerkki, joka havainnollistaa kaikkien näiden attribuuttien käyttöä:

index.html

index.html

copy

Videon upottaminen

Voit upottaa videotiedostoja 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 URL-osoitteen ja tiedostotyypin. Yleisesti tuettuja formaatteja ovat WebM, MP4 ja OGG;
  • controls-attribuutti näyttää standardin toistonhallinnan;
  • Jos käyttäjän selain ei tue videoelementtiä, näytetään varaviesti.

HTML-videoelementin yleisesti käytettyjä attribuutteja ovat:

  • autoplay: aloittaa videon toiston heti, kun sivu latautuu;
  • loop: saa videon toistumaan jatkuvasti;
  • muted: mykistää äänen oletuksena;
  • volume: määrittää oletusäänenvoimakkuuden tasolle äänitiedostolle, vaihdellen 0.0 (hiljainen) ja 1.0 (täysi äänenvoimakkuus) välillä;
  • poster: määrittää kuvan URL-osoitteen, joka näytetään videon pikkukuvana ennen kuin video toistetaan;
  • width ja height: määrittää videon toistimen leveyden ja korkeuden pikseleinä.

Tässä on esimerkki, joka havainnollistaa kaikkien näiden attribuuttien käyttöä:

index.html

index.html

copy

Huomautus

Lisäksi on olemassa monia JavaScript-kirjastoja ja API:ita, jotka tarjoavat lisätoimintoja videon toistamiseen ja käsittelyyn verkossa.

question mark

Mikä seuraavista väitteistä HTML:n <audio> ja <video> elementeistä on totta?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 5
some-alt