html
html copied to clipboard
whatwg
video networkState and currentSrc after load() with no source
What is the issue with the HTML Standard?
According to the resource selection algorithm, if "the media element has no assigned media provider object and has neither a src attribute nor a source element child: Set the networkState to NETWORK_EMPTY."
In my testing, however, every web browser sets the networkState to NETWORK_NO_SOURCE. Here's my example, with the source code below: https://lapcatsoftware.com/test/currentSrc.html
This can also happen on YouTube, where I first discovered the issue.
A related issue is that in this situation, the currentSrc can have a stale, non-empty value, which is misleading to web developers. The non-normative note for web developers says,
media.currentSrcReturns the URL of the current media resource, if any. Returns the empty string when there is no media resource, or it doesn't have a URL.
According to the MDN web docs,
A string object containing the absolute URL of the chosen media source; this may be an empty string if
networkStateisEMPTY; otherwise, it will be one of the resources listed by theHTMLSourceElementcontained within the media element, or the value or src if no<source>element is provided.
I believe there's actually a typo here, and it should say "the value of src" rather than "the value or src".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>video currentSrc</title>
</head>
<body>
<h1>video currentSrc</h1>
<div>
<video controls src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>
</div>
<script>
document.querySelector("video").addEventListener("ended", (event) => {
const video = event.target;
video.removeAttribute("src");
video.load();
console.log("src", video.src);
if (video.videoTracks)
console.log("videoTracks.length", video.videoTracks.length);
console.log("paused", video.paused);
console.log("readyState", video.readyState);
console.log("networkState", video.networkState);
console.log("currentSrc", video.currentSrc);
});
</script>
</body>
</html>
