HTML Audio & Video
HTML DOM Video canPlayType() Method
The canPlayType() method asks the browser whether it thinks it can play a given media type. It works on both audio and video elements (both inherit it from HTMLMediaElement) and is the standard way to feature-detect format support before choosing a source.
Definition and Usage
canPlayType() takes a MIME type string, optionally including a codecs parameter, and returns how confident the browser is that it can play that format. It never actually loads or plays anything; it only reports an opinion, which is why the answer is deliberately vague.
The method returns one of three strings: "probably", "maybe", or an empty string "". Because the empty string is falsy, any non-empty result can be treated as support.
Syntax
mediaElement.canPlayType(type)The type parameter is a string such as "video/mp4" or, more precisely, one that includes codecs like "video/mp4; codecs=avc1.42E01E, mp4a.40.2".
| Return value | Meaning |
|---|---|
| "probably" | The browser is fairly confident it can play this type |
| "maybe" | The browser cannot decide without trying to load the media |
| "" (empty string) | The browser is certain it cannot play this type |
Example
This runnable page tests several formats and prints each result. Run it to see which formats your browser reports for MP4, WebM and OGG.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>canPlayType Demo</title></head>
<body>
<h2>Which video formats can this browser play?</h2>
<video id="probe" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p><button onclick="detect()">Detect formats</button></p>
<pre id="output"></pre>
<script>
const probe = document.getElementById("probe");
const out = document.getElementById("output");
function detect() {
const mp4 = probe.canPlayType("video/mp4");
const webm = probe.canPlayType("video/webm");
const ogg = probe.canPlayType('video/ogg; codecs="theora"');
out.textContent =
"MP4: " + (mp4 || "(no)") + "\n" +
"WebM: " + (webm || "(no)") + "\n" +
"OGG: " + (ogg || "(no)");
}
</script>
</body>
</html>More Examples
A robust loader checks each candidate format and picks the first one the browser can play, falling back gracefully when nothing matches.
<!DOCTYPE html>
<html>
<body>
<video id="player" width="320" controls></video>
<p id="chosen"></p>
<script>
const player = document.getElementById("player");
const candidates = [
{ type: "video/webm", src: "movie.webm" },
{ type: "video/mp4", src: "https://www.w3schools.com/html/mov_bbb.mp4" }
];
function pickSource(video, list) {
for (const c of list) {
if (video.canPlayType(c.type)) {
video.src = c.src;
return c.type;
}
}
return null; // none supported
}
const chosen = pickSource(player, candidates);
document.getElementById("chosen").textContent =
chosen ? "Loaded format: " + chosen : "No supported format";
</script>
</body>
</html>Always include the codecs parameter when you can. Without it a browser may only answer "maybe", because container support alone does not guarantee the codec inside is decodable.
Key Takeaways
- canPlayType(type) reports likely support without loading the media.
- It returns "probably", "maybe", or an empty string (which is falsy, meaning no support).
- Both <audio> and <video> support it because it is inherited from HTMLMediaElement.
- Include a codecs parameter for a more confident "probably" answer.
- Loop over candidate formats and pick the first non-empty result for a resilient source loader.