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. Tarkastellaan tätä yksityiskohtaisemmin.

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.

Esimerkki:

<video controls autoplay loop>
  <!-- Source tags will be defined here -->
</video>

Lähde

<source>-tagia käytetään <video>-tägissä 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>-tagissa on controls, autoplay ja loop -attribuutit;
  • <source>-tageilla määritetään videon tiedostojen lähde-URL-osoitteet ja niiden MIME-tyypit;
  • Jos selain ei tue <video>-tagia tai määritettyjä videoformaatteja, näytetään vaihtoehtoinen teksti Your browser does not support the video element..
index.html

index.html

copy

Videotutoriaali

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

Suggested prompts:

Can you show me an example of how to add multiple videos with titles in HTML?

What are the best practices for making videos accessible on a website?

How can I customize the appearance of the video player using CSS?

Awesome!

Completion rate improved to 3.13

bookVideon Integrointi Verkkosivuille

Pyyhkäise näyttääksesi valikon

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

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.

Esimerkki:

<video controls autoplay loop>
  <!-- Source tags will be defined here -->
</video>

Lähde

<source>-tagia käytetään <video>-tägissä 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>-tagissa on controls, autoplay ja loop -attribuutit;
  • <source>-tageilla määritetään videon tiedostojen lähde-URL-osoitteet ja niiden MIME-tyypit;
  • Jos selain ei tue <video>-tagia tai määritettyjä videoformaatteja, näytetään vaihtoehtoinen teksti Your browser does not support the video element..
index.html

index.html

copy

Videotutoriaali

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