<source>

Alternatywne źródło obrazu, dźwięku lub wideo dla `<picture>`, `<audio>` i `<video>`.

Wyświetlanie: nie jest wyświetlany
Znacznik zamykający: Brak, element pusty
Dozwolona zawartość: Brak, element pusty

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<video controls width="300" height="200" preload="none" poster="/collections/covers/jak-nauczyc-sie-programowac.webp">
  <source src="/media/zapowiedz-kursu.webm" type="video/webm">
  <source src="/media/zapowiedz-kursu.mp4" type="video/mp4">
  <a href="/media/zapowiedz-kursu.mp4">Pobierz zapowiedź kursu (MP4)</a>
</video>

Podgląd

Plików wideo nie ma w podglądzie, dlatego odtwarzacz pokazuje tylko okładkę i kontrolki.

Definicja i zastosowanie

Element <source> podaje jedno z kilku możliwych źródeł multimediów. Stoi wewnątrz <picture>, <audio> albo <video>, a przeglądarka przegląda źródła po kolei i wybiera pierwsze, które potrafi wykorzystać. Jest elementem pustym i sam niczego nie wyświetla.

W <picture> plik wskazujesz atrybutem srcset, a warunki wyboru atrybutami media (zapytanie o ekran) i type (format pliku). W <audio> i <video> używasz atrybutów src i type, dzięki czemu możesz podać ten sam film w kilku formatach, na przykład WebM i MP4.

Atrybut type warto podawać zawsze. Przeglądarka od razu pomija wtedy źródła w formatach, których nie obsługuje, zamiast pobierać fragment każdego pliku, żeby to sprawdzić.

Składnia

<source src="…" type="…">
<source srcset="…" media="…">

Atrybuty

src
URL
Adres pliku dźwiękowego lub wideo. Używany wewnątrz <audio> i <video>.
type
typ MIME, np. `video/webm`, `audio/mpeg`, `image/avif`
Format pliku. Przeglądarka pomija źródła w formatach, których nie zna. Możesz dopisać parametr codecs, na przykład video/webm; codecs="vp9", żeby wskazać dokładny kodek.
srcset
adres obrazu lub lista wersji z opisem szerokości albo gęstości
Plik obrazu dla tego źródła, a nawet kilka jego wersji zapisanych tak samo jak w srcset elementu <img>. Używany tylko w <picture>.
media
zapytanie o media, np. `(min-width: 768px)`
Warunek, który musi spełnić ekran, żeby źródło zostało wybrane. Działa jak zapytania @media w CSS. Wygrywa pierwsze pasujące źródło, więc przy warunkach min-width zaczynaj od największej szerokości.
sizes
lista warunków i szerokości
Działa razem z srcset opartym na szerokościach (800w) i mówi przeglądarce, jak szeroki będzie obraz na stronie. Tylko w <picture>.
width / height
liczba pikseli
Wymiary obrazu z tego źródła. Przydają się przy różnych kadrach: przeglądarka rezerwuje miejsce o proporcjach źródła, które faktycznie wybrała. Tylko w <picture>.

Atrybut	Wartości	Opis
src	URL	Adres pliku dźwiękowego lub wideo. Używany wewnątrz `<audio>` i `<video>`.
type	typ MIME, np. `video/webm`, `audio/mpeg`, `image/avif`	Format pliku. Przeglądarka pomija źródła w formatach, których nie zna. Możesz dopisać parametr `codecs`, na przykład `video/webm; codecs="vp9"`, żeby wskazać dokładny kodek.
srcset	adres obrazu lub lista wersji z opisem szerokości albo gęstości	Plik obrazu dla tego źródła, a nawet kilka jego wersji zapisanych tak samo jak w `srcset` elementu `<img>`. Używany tylko w `<picture>`.
media	zapytanie o media, np. `(min-width: 768px)`	Warunek, który musi spełnić ekran, żeby źródło zostało wybrane. Działa jak zapytania `@media` w CSS. Wygrywa pierwsze pasujące źródło, więc przy warunkach `min-width` zaczynaj od największej szerokości.
sizes	lista warunków i szerokości	Działa razem z `srcset` opartym na szerokościach (`800w`) i mówi przeglądarce, jak szeroki będzie obraz na stronie. Tylko w `<picture>`.
width / height	liczba pikseli	Wymiary obrazu z tego źródła. Przydają się przy różnych kadrach: przeglądarka rezerwuje miejsce o proporcjach źródła, które faktycznie wybrała. Tylko w `<picture>`.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

src

URL

Adres pliku dźwiękowego lub wideo. Używany wewnątrz <audio> i <video>.

HTML

<audio controls preload="none">
  <source src="/podcast/odcinek-12.ogg" type="audio/ogg">
  <source src="/podcast/odcinek-12.mp3" type="audio/mpeg">
</audio>

Podgląd

Plików dźwiękowych nie ma w podglądzie, widoczne są tylko kontrolki odtwarzacza.

media

zapytanie o media, np. `(min-width: 768px)`

Warunek, który musi spełnić ekran, żeby źródło zostało wybrane. Działa jak zapytania @media w CSS. Wygrywa pierwsze pasujące źródło, więc przy warunkach min-width zaczynaj od największej szerokości.

HTML

<picture>
  <source media="(min-width: 480px)" srcset="/collections/covers/vibe-coding.webp" width="240" height="160">
  <img src="/collections/cursor.png" alt="Kurs vibe codingu z edytorem Cursor" width="72" height="72">
</picture>

Podgląd

Zwęź okno poniżej 480 pikseli, a obraz zmieni się na logo.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

W <video> i <audio> podawaj źródła od nowocześniejszego i lżejszego formatu do najbardziej zgodnego, który zwykle stoi na końcu (na przykład MP4).
W <picture> używaj srcset, a nie src. Atrybut src na <source> działa tylko w elementach audio i wideo.
Zmiana src w istniejącym <source> skryptem nie wystarczy. Trzeba jeszcze wywołać video.load(), żeby odtwarzacz wczytał nowy plik.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs