HTML <source> etiket

Definition og brug

<source> Tagget bruges til at specificere medieelementer (som <video>,<audio> og <picture>）Specificer flere medieressourcer.

<source> Tagget lader dig specificere alternative video/lyd/billede-filer, som browseren kan vælge baseret på browserens understøttelse eller viewport bredde. Browseren vælger den første, den understøtter. <source>.

Se også:

HTML tutorial:HTML video

HTML tutorial:HTML lyd

HTML DOM referencer:Source-objekt

Eksempel

Eksempel 1

Dette er en audioafspiller med to audiosourcer. Browseren vælger den første, den understøtter. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Din browser understøtter ikke audio-tagget.
</audio>

Prøv det selv

Eksempel 2

Brug i <video> <source> Afspil video:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Din browser understøtter ikke video-tagget.
</video>

Prøv det selv

Eksempel 3

Brug i <picture> <source> Brug <picture> til at definere forskellige billeder baseret på viewport bredde:

<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="Flowers" style="width:auto;">
</picture>

Prøv det selv

Egenskab

Egenskab Værdi Beskrivelse
media Medieforespørgsel Accepterer enhver gyldig medieforespørgsel, som normalt defineres i CSS.
sizes Bruges til at specificere billedstørrelsen for forskellige sider.
src URL

Bruges til at specificere URL'en til mediefilen.

Når <source> bruges til <audio> og <video>, er denne egenskab obligatorisk.
srcset URL

Bruges til at specificere URL'er til billeder, der skal bruges i forskellige situationer.

Denne egenskab er obligatorisk, når <source> bruges med <picture>.
type MIME-type Definerer ressourcens MIME-type.

Globale egenskaber

<source> Etiketten understøtter også Globale egenskaber i HTML.

Eventegenskaber

<source> Etiketten understøtter også Eventegenskaber i HTML.

Standard CSS-indstillinger

Ingen

Browserstøtte

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

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