Signatur
Beschreibung
currentSrc gibt als String die absolute URL der Medienressource zurück, die der Browser für ein <audio>- oder <video>-Element ausgewählt hat. Wenn keine Ressource ausgewählt ist, enthält sie einen leeren String "".
Besonders nützlich wird die Eigenschaft, wenn mehrere <source>-Kindelemente angegeben sind. Der Browser prüft sie der Reihe nach anhand von type und media und nimmt die erste passende Quelle. currentSrc zeigt dann, welche Datei tatsächlich geladen wird, etwa WebM oder MP4. Die Eigenschaft src dagegen gibt nur den Wert des src-Attributs zurück und bleibt bei der Verwendung von <source>-Elementen leer.
Der Wert wird im Rahmen des Ressourcen-Auswahlalgorithmus gesetzt, also nach dem Einfügen des Elements oder nach einem Aufruf von load(). Frühestens ab dem Ereignis loadstart ist er verlässlich verfügbar. Die Eigenschaft eignet sich gut für Analyse und Protokollierung, für die Fehlersuche bei der Formatwahl und um die gewählte Qualitätsstufe in der Oberfläche anzuzeigen.
Wird die Ressource über srcObject gesetzt, etwa ein MediaStream oder ein MediaSource-Objekt, ist currentSrc ein leerer String.
Rückgabewert
"", wenn keine Ressource ausgewählt ist bzw. srcObject verwendet wird.Beispiele
Gewählte Quelle bei mehreren <source>-Elementen ermitteln
// HTML:
// <video id="clip" controls>
// <source src="/media/intro.webm" type="video/webm">
// <source src="/media/intro.mp4" type="video/mp4">
// </video>
const video = document.querySelector('#clip');
video.addEventListener('loadstart', () => {
console.log('src-Attribut:', JSON.stringify(video.src));
console.log('Gewählte Quelle:', video.currentSrc);
});Relative src wird zu absoluter URL aufgelöst
const audio = new Audio('sounds/ping.mp3');
console.log('Sofort:', JSON.stringify(audio.currentSrc));
audio.addEventListener('loadedmetadata', () => {
console.log('Nach dem Laden:', audio.currentSrc);
}, { once: true });Gewähltes Format für die Analyse protokollieren
const reportFormat = (media) => {
const url = new URL(media.currentSrc);
const extension = url.pathname.split('.').pop();
console.log(`Format: ${extension}, Dauer: ${media.duration.toFixed(1)} s`);
};
const video = document.querySelector('video');
if (video.currentSrc && video.readyState >= HTMLMediaElement.HAVE_METADATA) {
reportFormat(video);
} else {
video.addEventListener('loadedmetadata', () => reportFormat(video), { once: true });
}Leerer Wert bei srcObject
const video = document.querySelector('video');
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
await video.play();
console.log(JSON.stringify(video.currentSrc));// Wichtig · Fallstricke
- Nur lesbar: Eine Zuweisung an
currentSrchat keine Wirkung, im strikten Modus löst sie einenTypeErroraus. Eine neue Quelle setzt man übersrc,srcObjectoder geänderte<source>-Elemente mit anschließendemload(). - Zeitpunkt: Direkt nach dem Erzeugen des Elements oder nach dem Ändern von
srckann der Wert noch leer oder veraltet sein, weil die Ressourcenauswahl asynchron abläuft. Man sollte ihn deshalb erst inloadstart,loadedmetadataoder später auslesen. - Unterschied zu
src:srcspiegelt nur das Attribut wider.currentSrcist das tatsächliche Ergebnis der Auswahl. - Kein Nachweis für erfolgreiches Laden: Auch wenn das Laden später scheitert, kann
currentSrcgesetzt sein. Zur Prüfung dienen zusätzlicherror,networkStateoder daserror-Ereignis. - Blob- und MSE-URLs: Bei
URL.createObjectURL()steht dort eineblob:-URL. BeisrcObjectist der Wert leer. - Kompatibilität: Wird von allen modernen Browsern unterstützt, auch mobil, und ist seit HTML5 Standard.