HTML <source> -elementti

Määrittely ja käyttö

<source> Tagit käytetään media-elementtien (kuten <video>、<audio> ja <picture>）Määritä useita media-resursseja.

<source> Tagit sallivat sinun määrittää vaihtoehtoiset video-/äänita-/kuvatiedostot, joita selain voi valita sen tukeman tiedoston mukaan tai näyttökorkeuden mukaan. Selain valitsee ensimmäisen sen tukeman tiedoston. <source>.

Katso myös:

HTML-opas:HTML-video

HTML-opas:HTML-ääni

HTML DOM -viittausopas:Lähdeobjekti

Esimerkki

Esimerkki 1

Tämä on äänentoistolaite, jossa on kaksi äänitiedostoa. Selain valitsee ensimmäisen sen tukeman tiedoston. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Selaimesi ei tue audio-elementtiä.
</audio>

Kokeile itse

Esimerkki 2

Käytetään <video> -elementissä <source> Toista videoa:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Selaimesi ei tue video-elementtiä.
</video>

Kokeile itse

Esimerkki 3

Käytetään <picture> -elementissä <source> Määritä eri kuvat näyttökorkeuden mukaan:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Kukat" style="width:auto;">
</picture>

Kokeile itse

Ominaisuus

Ominaisuus Arvo Kuvaus
media Media-kysely Hyväksyy kaikki kelvolliset media-kyselyt, jotka yleensä määritellään CSS:ssä.
sizes Määrittää kuvien kokoonpanon eri sivun ulkoasujen mukaan.
src URL

Käytetään määrittämään median tiedoston URL.

Kun <source> käytetään <audio> ja <video> -elementeissä, tämä ominaisuus on pakollinen.
srcset URL

Käytetään määrittämään URL-osoitteet eri tilanteissa käytettävistä kuvista.

Kun <source> käytetään <picture>-elementissä, tämä ominaisuus on pakollinen.
type MIME-tyypit Määrittelee resurssin MIME-tyypin.

Globaalit ominaisuudet

<source> Tunniste tukee myös HTML:n globaalit ominaisuudet.

tapahtumien ominaisuudet

<source> Tunniste tukee myös HTML:n tapahtumien ominaisuudet.

Oletusarvoinen CSS-asetus

Ei mitään.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee kyseistä ominaisuutta.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5