Het element <source>

Attributen

Dit element ondersteunt alle globale attributen. Daarnaast kunnen de volgende attributen ermee gebruikt worden:

Gebruiksopmerkingen

Het <source>-element is een void element, wat betekent dat het niet alleen geen inhoud heeft, maar ook geen afsluitende tag. Dat wil zeggen dat u </source> nooit in uw HTML gebruikt.

De browser doorloopt een lijst van <source>-elementen om een formaat te vinden dat hij ondersteunt. Hij gebruikt de eerste die hij kan weergeven. Voor elk <source>-element:

• Als het type-attribuut niet is opgegeven, haalt de browser het type van de media op bij de server en bepaalt hij of dit weergegeven kan worden. Als de media niet weergegeven kan worden, controleert de browser de volgende <source> in de lijst.
• Als het type-attribuut wel is opgegeven, vergelijkt de browser dit onmiddellijk met de mediatypen die hij kan weergeven. Als het type niet ondersteund wordt, slaat de browser het bevragen van de server over en controleert hij direct het volgende <source>-element.

Als geen van de <source>-elementen een bruikbare bron biedt:

• In het geval van een <picture>-element valt de browser terug op het gebruik van de afbeelding die is opgegeven in het onderliggende <img>-element van het <picture>-element.
• In het geval van een <audio>- of <video>-element valt de browser terug op het weergeven van de inhoud tussen de openings- en afsluitende tags van het element.

Voor informatie over afbeeldingsformaten die door webbrowsers ondersteund worden en begeleiding bij het selecteren van geschikte formaten om te gebruiken, zie onze gids voor afbeeldingsbestandstypen en -formaten. Voor details over de video- en audiomediatypen die u kunt gebruiken, zie de gids voor mediatypen en -formaten.

Voorbeelden

Het type-attribuut gebruiken met <video>

Dit voorbeeld laat zien hoe u een video in verschillende formaten kunt aanbieden: WebM voor browsers die dit ondersteunen, Ogg voor die welke Ogg ondersteunen, en QuickTime voor browsers die QuickTime ondersteunen. Als het <audio>- of <video>-element niet ondersteund wordt door de browser, wordt in plaats daarvan een melding getoond. Als de browser het element wel ondersteunt maar geen van de opgegeven formaten ondersteunt, wordt er een error-gebeurtenis geactiveerd op het <audio>- of <video>-element en geven de standaard mediabedieningselementen (indien ingeschakeld) een fout aan. Voor meer details over welke mediabestandsformaten te gebruiken en hun browserondersteuning, zie onze gids voor mediatypen en -formaten.

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Het media-attribuut gebruiken met <video>

Dit voorbeeld laat zien hoe u een alternatief bronbestand kunt aanbieden voor viewports boven een bepaalde breedte. Wanneer de browseromgeving van een gebruiker voldoet aan de opgegeven media-conditie, wordt het bijbehorende <source>-element gekozen. De inhoud van het src-attribuut ervan wordt vervolgens opgevraagd en weergegeven. Als de media-conditie niet overeenkomt, gaat de browser verder naar het volgende <source> in de lijst. De tweede <source>-optie in de onderstaande code heeft geen media-conditie, dus deze wordt geselecteerd voor alle andere browsercontexten.

<video controls>
  <source src="foo-large.webm" media="(width >= 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Voor meer voorbeelden is het artikel HTML-video en -audio in het leergebied een geweldige bron.

Het media-attribuut gebruiken met <picture>

In dit voorbeeld zijn twee <source>-elementen opgenomen binnen <picture>, die versies van een afbeelding aanbieden om te gebruiken wanneer de beschikbare ruimte bepaalde breedtes overschrijdt. Als de beschikbare breedte kleiner is dan de kleinste van deze breedtes, valt de browser terug op de afbeelding die is opgegeven in het <img>-element.

<picture>
  <source srcset="voorbeeld.png" media="(width >= 800px)" />
  <source srcset="voorbeeld.png" media="(width >= 600px)" />
  <img src="voorbeeld.png" alt="dit naslagwerk" />
</picture>

Bij het <picture>-element moet u altijd een <img> met een terugvalafbeelding opnemen. Zorg er ook voor dat u een alt-attribuut toevoegt voor toegankelijkheid, tenzij de afbeelding puur decoratief en irrelevant voor de inhoud is.

height- en width-attributen gebruiken met <picture>

In dit voorbeeld zijn drie <source>-elementen met height- en width-attributen opgenomen in een <picture>-element. Een mediaquery stelt de browser in staat een afbeelding te selecteren om weer te geven met de height- en width-attributen, gebaseerd op de viewport-grootte.

<picture>
  <source
    srcset="landscape.png"
    media="(width >= 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(width >= 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(width >= 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image used when the browser does not support the sources"
    width="500"
    height="400" />
</picture>

Technische samenvatting

Zie ook

• <audio>
• <picture>
• <video>