Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Video canPlayType( ) Method
The HTML DOM Video canPlayType() method returns a string indicating whether the browser can play the specified video type. This method helps determine video format compatibility before attempting playback, allowing developers to provide fallback options or choose the most suitable video format.
Syntax
Following is the syntax for the canPlayType() method −
videoObject.canPlayType(type)
Parameters
The method accepts one parameter −
- type − A string specifying the MIME type of the video format to test (e.g., "video/mp4", "video/webm", "video/ogg").
Return Value
The canPlayType() method returns one of three possible string values −
| Return Value | Description |
|---|---|
| "probably" | The browser most likely supports the specified video type and can play it successfully. |
| "maybe" | The browser might support the specified video type, but playback must be attempted to be certain. |
| "" (empty string) | The browser definitely does not support the specified video type. |
Example − Testing Video Format Support
Following example demonstrates how to check if the browser supports different video formats −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video canPlayType()</title>
<style>
.container {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#result {
margin-top: 20px;
padding: 15px;
background-color: #f0f0f0;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Video Format Support Test</h2>
<video id="videoElement" width="320" height="240" controls>
Your browser does not support the video tag.
</video>
<br><br>
<button onclick="checkMP4()">Check MP4 Support</button>
<button onclick="checkWebM()">Check WebM Support</button>
<button onclick="checkOgg()">Check Ogg Support</button>
<div id="result"></div>
</div>
<script>
var video = document.getElementById("videoElement");
var result = document.getElementById("result");
function checkMP4() {
var support = video.canPlayType("video/mp4");
displayResult("MP4", support);
}
function checkWebM() {
var support = video.canPlayType("video/webm");
displayResult("WebM", support);
}
function checkOgg() {
var support = video.canPlayType("video/ogg");
displayResult("Ogg", support);
}
function displayResult(format, support) {
var message = "Format: " + format + "<br>";
if (support === "probably") {
message += "Support: Probably supported ?";
} else if (support === "maybe") {
message += "Support: Maybe supported ?";
} else {
message += "Support: Not supported ?";
}
result.innerHTML = message;
}
</script>
</body>
</html>
The output shows different support levels for various video formats. Click each button to test format compatibility −
Format: MP4 Support: Probably supported ? (Results vary based on browser capabilities)
Example − Dynamic Video Source Selection
Following example shows how to use canPlayType() to automatically select the best supported video format −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Video Format Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Automatic Video Format Detection</h2>
<video id="smartVideo" width="400" height="300" controls></video>
<br><br>
<button onclick="loadOptimalVideo()">Load Best Supported Format</button>
<div id="formatInfo" style="margin-top: 15px; padding: 10px; background: #e9e9e9;"></div>
<script>
function loadOptimalVideo() {
var video = document.getElementById("smartVideo");
var info = document.getElementById("formatInfo");
// Test formats in order of preference
var formats = [
{type: "video/mp4", src: "sample.mp4", name: "MP4"},
{type: "video/webm", src: "sample.webm", name: "WebM"},
{type: "video/ogg", src: "sample.ogg", name: "Ogg"}
];
var selectedFormat = null;
for (var i = 0; i < formats.length; i++) {
var support = video.canPlayType(formats[i].type);
if (support === "probably") {
selectedFormat = formats[i];
break;
} else if (support === "maybe" && !selectedFormat) {
selectedFormat = formats[i];
}
}
if (selectedFormat) {
video.src = selectedFormat.src;
info.innerHTML = "Selected format: " + selectedFormat.name +
"<br>Support level: " + video.canPlayType(selectedFormat.type);
} else {
info.innerHTML = "No supported video formats found.";
}
}
</script>
</body>
</html>
This example automatically selects the best supported video format from available options, preferring "probably" over "maybe" support levels.
Common Use Cases
The canPlayType() method is commonly used for −
- Format Detection − Determining which video formats the browser supports before loading content.
- Fallback Implementation − Providing alternative video sources when the preferred format is not supported.
- Progressive Enhancement − Enhancing user experience by serving the optimal video format for each browser.
- Codec Validation − Testing specific codec support within video containers (e.g., "video/mp4; codecs='avc1.42E01E'").
Browser Compatibility
The canPlayType() method is supported by all modern browsers that support the HTML5 video element. However, the specific video formats supported vary between browsers −
| Format | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| MP4/H.264 | Yes | Yes | Yes | Yes |
| WebM/VP8 | Yes | Yes | No | Yes |
| Ogg/Theora | Yes | Yes | No | No |
Conclusion
The HTML DOM Video canPlayType() method is essential for detecting video format compatibility across different browsers. It returns "probably", "maybe", or an empty string to indicate support levels, enabling developers to implement robust fallback mechanisms and provide optimal video experiences for all users.
230 Views
