HTML Audio & Video
HTML DOM Audio currentSrc Property
The currentSrc property returns the absolute URL of the media resource the browser has actually selected to play. It is read-only and especially useful when you provide several <source> children and want to know which one won.
Definition and Usage
The src property only reflects the src attribute you set on the element itself. When you instead use multiple <source> children, the browser picks the first supported one, and currentSrc tells you which URL it chose, resolved to an absolute address.
It returns a string. Before a source has been selected (for example immediately after creating the element) it may be an empty string.
Syntax
mediaElement.currentSrcExample
This runnable page offers a WebM source first and an MP4 fallback, then reports the URL the browser actually chose once data loads.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>currentSrc Demo</title></head>
<body>
<h2>Which source did the browser pick?</h2>
<video id="myVideo" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p><button onclick="showSource()">Show chosen source</button></p>
<p id="output">Play or load the video first.</p>
<script>
const video = document.getElementById("myVideo");
const out = document.getElementById("output");
function showSource() {
out.textContent = video.currentSrc
? "Playing from: " + video.currentSrc
: "No source selected yet.";
}
// currentSrc is reliable once loadeddata fires
video.addEventListener("loadeddata", showSource);
</script>
</body>
</html>More Examples
Compare src and currentSrc to see the difference: src is empty when you use <source> children, but currentSrc holds the resolved absolute URL.
<!DOCTYPE html>
<html>
<body>
<audio id="a" controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<p><button onclick="compare()">Compare src vs currentSrc</button></p>
<pre id="out"></pre>
<script>
const a = document.getElementById("a");
function compare() {
document.getElementById("out").textContent =
"src = " + (a.src || "(empty)") + "\n" +
"currentSrc = " + (a.currentSrc || "(empty)");
}
</script>
</body>
</html>currentSrc is read-only. To change the playing media, set the src property (or a <source> element) and call load(); currentSrc updates once selection completes.
Key Takeaways
- currentSrc returns the absolute URL of the resource the browser actually chose.
- It is read-only and may be an empty string before selection.
- src reflects the src attribute; currentSrc reflects the resolved, playing resource.
- Read it inside loadeddata (or loadedmetadata) for a reliable value.
- To switch media, set src and call load(); currentSrc then updates.