HTMLSourceElement.src — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSourceElement.src

Beschreibung

Die Eigenschaft src des Interfaces HTMLSourceElement spiegelt das HTML-Attribut src eines <source>-Elements. Sie enthält die URL einer Medienressource, etwa einer Video- oder Audiodatei, die ein übergeordnetes <video>- oder <audio>-Element abspielen kann.

Beim Lesen liefert die Eigenschaft immer eine absolute, vollständig aufgelöste URL. Ein relatives Attribut wie clip.mp4 wird also relativ zur Basis-URL des Dokuments aufgelöst. Den Wert genau so, wie er im Markup steht, erhältst du mit getAttribute('src'). Beim Schreiben wird das Attribut src gesetzt.

Du brauchst src vor allem, wenn du Medienquellen dynamisch erzeugst oder austauschst, zum Beispiel für verschiedene Qualitätsstufen, Sprachfassungen oder Playlists. Mehrere <source>-Elemente mit unterschiedlichen type-Angaben erlauben dem Browser, das erste Format zu wählen, das er abspielen kann.

Innerhalb von <picture> wird src ignoriert. Dort gelten srcset und sizes.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: neue URL (relativ oder absolut) der Medienressource. Wird in das Attribut `src` geschrieben.

Rückgabewert

Typ

string

Beschreibung

Die absolute, aufgelöste URL aus dem Attribut src. Fehlt das Attribut, ist das Ergebnis ein leerer String "".

Beispiele

Aufgelöste URL gegenüber dem Attributwert

// HTML: <video id="player" controls><source src="media/intro.mp4" type="video/mp4"></video>
const source = document.querySelector('#player source');

console.log(source.src);                 // absolute URL
console.log(source.getAttribute('src')); // Wert wie im Markup

https://example.com/media/intro.mp4 media/intro.mp4

Videoquelle zur Laufzeit wechseln

const video = document.querySelector('#player');
const source = video.querySelector('source');

const switchQuality = (quality) => {
  const time = video.currentTime;
  source.src = `media/intro-${quality}.mp4`;
  video.load(); // nötig, damit die neue Quelle übernommen wird
  video.addEventListener('loadedmetadata', () => {
    video.currentTime = time;
    video.play();
  }, { once: true });
};

document.querySelector('#hd').addEventListener('click', () => switchQuality('1080p'));

Mehrere Formate dynamisch als Quellen anlegen

const audio = document.createElement('audio');
audio.controls = true;

const formats = [
  { src: 'sounds/jingle.opus', type: 'audio/ogg; codecs=opus' },
  { src: 'sounds/jingle.mp3', type: 'audio/mpeg' }
];

for (const { src, type } of formats) {
  const source = document.createElement('source');
  source.src = src;
  source.type = type;
  audio.append(source);
}

document.body.append(audio);
audio.addEventListener('loadstart', () => console.log('Gewählt:', audio.currentSrc));

Gewählt: https://example.com/sounds/jingle.opus

// Wichtig · Fallstricke

Kein automatisches Neuladen: Wenn du src eines vorhandenen <source>-Elements änderst, lädt das Medienelement die Ressource nicht neu. Rufe danach HTMLMediaElement.load() auf.
Welche Quelle gerade abgespielt wird, verrät HTMLMediaElement.currentSrc, nicht source.src.
Hat das <video>/<audio>-Element selbst ein Attribut src, werden alle <source>-Kindelemente ignoriert.
Innerhalb von <picture> hat src keine Wirkung. Verwende dort srcset.
Für Ressourcen von fremden Domains gelten CORS-Regeln, sobald du die Mediendaten auswertest, etwa per Canvas oder Web Audio. Setze dafür crossorigin am Medienelement.
Übernimm URLs aus Benutzereingaben nicht ungeprüft. Eine Content Security Policy (media-src) kann erlaubte Quellen einschränken.
Die Eigenschaft wird von allen modernen Browsern unterstützt.

Siehe auch

HTMLOutputElement.form HTMLSourceElement.srcset HTMLSourceElement.sizes HTMLSourceElement.type HTMLSourceElement.media