<source> în HTML

<video controls>
  <source src="film.webm" type="video/webm">
  <source src="film.mp4" type="video/mp4">
</video>

Ce face <source>

Elementul <source> este un element gol care stă în interiorul lui <video>, <audio> sau <picture>. Fiecare <source> descrie o variantă a resursei, iar browserul le citește în ordine și o folosește pe prima potrivită.

În <video> și <audio> folosești src și type. Browserul sare peste formatele pe care nu le poate reda, fără să descarce fișierul. În <picture> folosești srcset, media și type (de exemplu AVIF și WebP cu rezervă JPEG).

Ordinea contează: pune primul formatul mai eficient (WebM, AVIF), apoi formatul compatibil cu toate browserele (MP4, JPEG).

Atribute

Atribut	Descriere
src	În <video> / <audio>: adresa fișierului media.
type	Tipul MIME, de exemplu video/mp4, audio/ogg sau image/avif. Poate include codecul.
srcset	În <picture>: una sau mai multe imagini, cu descriptori w sau x.
media	O condiție media ((min-width: 800px)); varianta se folosește doar când condiția este adevărată.
sizes / width / height	În <picture>: lățimea afișată și dimensiunile imaginii, ca la <img>.

Exemple

Exemplul 1: Un clip video în două formate

Browserele care redau WebM îl iau pe primul; celelalte trec la MP4. Textul de la final apare doar în browsere fără <video>.

<video controls width="640" poster="iasi-poster.jpg">
  <source src="iasi-timelapse.webm" type="video/webm">
  <source src="iasi-timelapse.mp4" type="video/mp4">
  <a href="iasi-timelapse.mp4">Descarcă filmul</a>
</video>

Ce afișează browserul

Playerul video cu imaginea de poster și butonul de redare. Se descarcă doar varianta aleasă (WebM sau MP4).

Exemplul 2: Imagine în AVIF și WebP, cu rezervă JPEG

<img> de la final este obligatoriu: el afișează imaginea aleasă și păstrează textul alternativ.

<picture>
  <source srcset="palatul-culturii.avif" type="image/avif">
  <source srcset="palatul-culturii.webp" type="image/webp">
  <img src="palatul-culturii.jpg" alt="Palatul Culturii din Iași" width="1200" height="800">
</picture>

Ce afișează browserul

Fotografia Palatului Culturii. Browserul descarcă AVIF dacă îl suportă, altfel WebP, altfel JPEG.

Exemplul 3: Imagine diferită pe ecrane late

Pe ecrane de cel puțin 900 px apare fotografia panoramică; pe telefon, varianta pătrată.

<picture>
  <source media="(min-width: 900px)" srcset="copou-panoramic.jpg">
  <img src="copou-patrat.jpg" alt="Parcul Copou toamna">
</picture>

Ce afișează browserul

Pe laptop: fotografia lată a parcului. Pe telefon: fotografia pătrată, decupată pe aleea principală.

Greșeli frecvente

• Atributul src pus pe <video> și, în plus, elemente <source>: când <video> are src, elementele <source> sunt ignorate.
• Folosirea lui src în loc de srcset pe <source> din <picture>: varianta nu este luată în seamă.
• <picture> fără <img> la final: nu se afișează nimic.

Comenzi înrudite

• <picture>: Container flexibil pentru imagini responsive: oferă formate moderne (AVIF, WebP) și variante adaptate la mărimea ecranului.
• <video>: Redă conținut video direct în browser, fără pluginuri externe, cu butoane native de redare și volum.
• <audio>: Redă fișiere audio (podcasturi, muzică, efecte sonore) direct în pagină, cu controale native de redare.
• <img>: Inserează o imagine în pagină; element vid cu atribute obligatorii src (calea) și alt (textul alternativ).