Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Videon Integrointi Verkkosivuille | Kuvat ja Media
HTML:n Perusteet

bookVideon Integrointi Verkkosivuille

Videon upottaminen on samanlaista kuin äänen upottaminen. Käytetyt attribuutit ja tagit ovat vertailukelpoisia.

Videon upottaminen

<video>-tagi upottaa videosisällön HTML-dokumenttiin, jolloin käyttäjät voivat toistaa videoita suoraan selaimessa.

Videon attribuutit

  • controls: lisää videon toiston, tauon ja äänenvoimakkuuden säätimet;
  • autoplay: määrittää automaattisen toiston;
  • loop: mahdollistaa videon jatkuvan toiston.
<video controls autoplay loop>
  <!-- Source tags will be defined here -->
</video>

Lähde

<source>-tagia käytetään <video>-tunnisteen sisällä määrittämään videon tiedoston lähde (URL) ja sen attribuutit. src määrittää videon tiedoston URL-osoitteen. type määrittää videon tiedoston MIME-tyypin.
Esimerkki:

<video controls autoplay loop>
  <source src="video-url.mp4" type="video/mp4" />
  <source src="video-url.webm" type="video/webm" />
  Your browser does not support the video element.
</video>

Yllä olevassa esimerkissä:

  • <video>-tunnisteessa on controls, autoplay ja loop -attribuutit;
  • <source>-tunnisteet määrittävät videon tiedostojen lähde-URL-osoitteet ja niiden MIME-tyypit;
  • Jos selain ei tue <video>-tunnistetta tai määritettyjä videoformaatteja, näytetään vaihtoehtoinen teksti Your browser does not support the video element..
index.html

index.html

copy
Note
Huomio

Yleisesti tuettuja videoformaatteja ovat MP4, WebM ja Ogg. On suositeltavaa tarjota video useissa eri formaateissa yhteensopivuuden varmistamiseksi eri selaimilla ja laitteilla.

1. Mitä tunnistetta käytetään videon upottamiseen HTML-dokumenttiin?

2. Mikä <video>- ja <audio>-tunnisteiden attribuutti lisää ohjaimet, kuten toisto, tauko ja äänenvoimakkuuden säätö?

question mark

Mitä tunnistetta käytetään videon upottamiseen HTML-dokumenttiin?

Select the correct answer

question mark

Mikä <video>- ja <audio>-tunnisteiden attribuutti lisää ohjaimet, kuten toisto, tauko ja äänenvoimakkuuden säätö?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 5

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

bookVideon Integrointi Verkkosivuille

Pyyhkäise näyttääksesi valikon

Videon upottaminen on samanlaista kuin äänen upottaminen. Käytetyt attribuutit ja tagit ovat vertailukelpoisia.

Videon upottaminen

<video>-tagi upottaa videosisällön HTML-dokumenttiin, jolloin käyttäjät voivat toistaa videoita suoraan selaimessa.

Videon attribuutit

  • controls: lisää videon toiston, tauon ja äänenvoimakkuuden säätimet;
  • autoplay: määrittää automaattisen toiston;
  • loop: mahdollistaa videon jatkuvan toiston.
<video controls autoplay loop>
  <!-- Source tags will be defined here -->
</video>

Lähde

<source>-tagia käytetään <video>-tunnisteen sisällä määrittämään videon tiedoston lähde (URL) ja sen attribuutit. src määrittää videon tiedoston URL-osoitteen. type määrittää videon tiedoston MIME-tyypin.
Esimerkki:

<video controls autoplay loop>
  <source src="video-url.mp4" type="video/mp4" />
  <source src="video-url.webm" type="video/webm" />
  Your browser does not support the video element.
</video>

Yllä olevassa esimerkissä:

  • <video>-tunnisteessa on controls, autoplay ja loop -attribuutit;
  • <source>-tunnisteet määrittävät videon tiedostojen lähde-URL-osoitteet ja niiden MIME-tyypit;
  • Jos selain ei tue <video>-tunnistetta tai määritettyjä videoformaatteja, näytetään vaihtoehtoinen teksti Your browser does not support the video element..
index.html

index.html

copy
Note
Huomio

Yleisesti tuettuja videoformaatteja ovat MP4, WebM ja Ogg. On suositeltavaa tarjota video useissa eri formaateissa yhteensopivuuden varmistamiseksi eri selaimilla ja laitteilla.

1. Mitä tunnistetta käytetään videon upottamiseen HTML-dokumenttiin?

2. Mikä <video>- ja <audio>-tunnisteiden attribuutti lisää ohjaimet, kuten toisto, tauko ja äänenvoimakkuuden säätö?

question mark

Mitä tunnistetta käytetään videon upottamiseen HTML-dokumenttiin?

Select the correct answer

question mark

Mikä <video>- ja <audio>-tunnisteiden attribuutti lisää ohjaimet, kuten toisto, tauko ja äänenvoimakkuuden säätö?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 5
some-alt