HTML <source> etikett

Definition och användning

<source> Taggar används för att specificera mediaelement (som <video>,<audio> och <picture>）Specificera flera medieresurser.

<source> Taggar låter dig specificera alternativ video/audio/bildfiler, och browsern väljer den första den stöder. <source>.

Se också:

HTML-lärjare:HTML video

HTML-lärjare:HTML ljud

HTML DOM referenshandbok:Source-objekt

Exempel

Exempel 1

Detta är en audio spelare med två audio-källor. Browsern väljer den första den stöder. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Din webbläsare stöder inte audio-taggen.
</audio>

Prova det själv

Exempel 2

Använd i <video>: <source> Spela upp video:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Din webbläsare stöder inte video-taggen.
</video>

Prova det själv

Exempel 3

Använd i <picture>: <source> För att definiera olika bilder baserat på viewportbredd:

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

Prova det själv

Attribut

Attribut Värde Beskrivning
media Mediafrågor Accepterar alla giltiga mediafrågor, vanligtvis definierade i CSS.
sizes Används för att specificera bildstorlek för olika sidolayouts.
src URL

Används för att specificera URL:en till mediefilen.

När <source> används för <audio> och <video>, är detta attribut nödvändigt.
srcset URL

Används för att specificera URL:er för bilder som används i olika situationer.

Detta är ett nödvändigt attribut när <source> används med <picture>.
type MIME-typ Definierar resursens MIME-typ.

Globala attribut

<source> Etiketten stöder också Globala attribut i HTML.

Evenhetsattribut

<source> Etiketten stöder också Evenhetsattribut i HTML.

Standard CSS-inställningar

Inget.

Webbläsarstöd

Numrerna i tabellen anger den första webbläsarens version som helt stöder egenskapen.

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