HTML Tutorial

HTML-tagg: <source>

<source>-taggen används för att ange flera mediekällor för ett HTML5-mediaelement som <audio> eller <video>. Den tillåter webbläsaren att välja den bästa källan baserat på tillgänglighet och användarens preferenser.

Användning av <source>

  1. Placera <source>-element innan det överordnade mediaelementet.
  2. Ange src-attributet för att länka till mediekällan.
  3. Ange type-attributet för att ange medietypen (t.ex. "audio/mpeg" för ljud eller "video/mp4" för video).

Attribut för <source>

  • src: URL:en till mediekällan
  • type: Medietypen
  • media: En mediefråga som anger när källan ska användas (t.ex. "max-width: 640px" för små skärmar)

Exempel med <source>

<video controls>
  <source src="video-low.mp4" type="video/mp4">
  <source src="video-high.mp4" type="video/mp4">
</video>

I detta exempel tillhandahålls två mediekällor: video-low.mp4 för enheter med lägre bandbredd och video-high.mp4 för enheter med högre bandbredd.

Utforska <source>-taggen

För att ytterligare förklara användningen av <source>-taggen kan vi skapa ett enkelt HTML-exempel:

<!DOCTYPE html>
<html>
<body>
  <audio controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
  </audio>
</body>
</html>

I detta exempel tillhandahålls två ljudkällor: song.mp3 för webbläsare som stöder MP3 och song.ogg för webbläsare som stöder OGG. När du spelar upp ljudet väljer webbläsaren automatiskt den bästa källan baserat på användarens system och preferenser.