Hvad bruges source elementet til?
HTML-elementet source er et element, der bruges til at angive kilden til en mediefil eller en ressource, såsom et billede, et lyd- eller videoklip eller en anden form for mediefil. Det bruges som et alternativ til at bruge et element som img eller video, da det giver mulighed for at bruge flere forskellige typer filer, der er understøttet af forskellige browsere og platforme. Det giver også mulighed for at angive flere kilder til samme mediafil, så browsere kan vælge den, der er mest passende til deres platform.
Source-elementet har to vigtige attributter – type og src. Type-attributten skal bruges til at angive mediefilens MIME-type, og src-attributten skal bruges til at angive den fulde sti til mediefilen.
Source-elementet bruges typisk til at inkludere en video eller et audio-element i et dokument. Det kan også bruges i et billede-element, hvis forskellige browsere har brug for forskellige typer af billedfiler. I dette tilfælde kan du angive flere kilder til billedet, så browseren kan vælge den, der er mest passende.
Som et eksempel kan et video-element følges af flere source-elementer, hvor hver angiver en anden version af videoen i en anden filtype, så browseren kan vælge den bedst egnede version.
I alt giver source-elementet mulighed for fleksibilitet og kompatibilitet med forskellige browsere og platforme, da det giver mulighed for at angive forskellige mediefiler og typer.
Eksempler på source
1. Eksempel: <source src=”https://example.com/video.mp4″ type=”video/mp4″>
This example specifies the source of a video file and its type, in this case an mp4.
2. Eksempel: <source src=”https://example.com/audio.mp3″ type=”audio/mpeg”>
This example specifies the source of an audio file and its type, in this case an mp3.
3. Eksempel: <source srcset=”https://example.com/image-small.jpg 320w, https://example.com/image-large.jpg 640w” type=”image/jpeg”>
This example specifies the source of an image file and its type, in this case a jpeg. Additionally, it also specifies multiple sources of different sizes, allowing the browser to choose which one to use depending on the size of the viewport.