HTML and CSS Reference
In-Depth Information
probably
If the user agent determines that it can probably play the media type
maybe
If the user agent can't determine whether it can play the media file, until it actually tries to
play it
empty string
If the user agent knows for sure it can't play the media type
Interesting values, if a little vague. The method is handy, though, as a way of testing what user
agent can play what media type.
Example 14
shows an application that uses
canPlayType
with several different type strings to create a table browser codec support.
Example14.Testing media types with the HTMLMediaElement canPlay method
<!DOCTYPE html>
<head>
<title>video canplay</title>
<meta charset="utf-8" />
<style>
td, table
{ border: 1px solid #ccc; }
td
{ padding: 10px; }
</style>
<script>
window.onload=function() {
var videoElement = document.createElement("video");
// load formats
var formats =[
'video/webm; codecs="vp8, vorbis"',
'video/ogg; codecs="theora, vorbis"',
'video/ogg; codecs="theora, speex"',
'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
'video/mp4; codecs="avc1.58A01E, mp4a.40.2"',
'video/mp4; codecs="avc1.4D401E, mp4a.40.2"',
'video/mp4; codecs="avc1.64001E, mp4a.40.2"',
'video/mp4; codecs="mp4v.20.8, mp4a.40.2"',
'video/mp4; codecs="mp4v.20.240, mp4a.40.2"'];
// build support table
var results = "<table><tr><th>Container/
Codec</th><th>CanPlay</th>";
