Using the canPlayType() Method of the HTMLMediaElement API

This short tip appears in this week's issue of Web Tools Weekly, my newsletter for front-end and full-stack web developers.

If you're dealing with varying levels of support for audio and video files in your apps, you'll want to be familiar with the canPlayType() method of the HTMLMediaElement API.

This method allows you to determine whether a browser can play a specific media type or codec before attempting to load it. This can help ensure cross-browser compatibility when using different video and audio files.

Of course, in most cases you should be pretty safe to use modern media formats, but if you need to check for support, here are a few examples.

const video = document.getElementById('videoElement');

const mediaType = 'video/mp4';

if (video.canPlayType(mediaType)) {
  console.log('Browser supports ' + mediaType);
} else {
  console.log('Browser does not support ' + mediaType);
}

The example above assumes a video element on the page, then the media type is passed in to the canPlayType() method. The method takes a single argument, a string specifying the MIME type of the media you want test.

The method will return one of 3 string values, depending on support:

• An empty string, indicating it's not playable on the current device
• A string containing the text "probably", indicating it's likely to play on the current device
• A string containing "maybe", indicating there's not enough info to determine if it's playable on the current device

Note that the above code assumes that an answer of "maybe" means it's playable, so you'd have to adjust the code to account for "maybe", if needed, though it's probably rare to get that result.

You can also optionally pass in a codecs parameter containing a comma-separated list of codecs. Here's an example that checks for codecs:

const codecs = [
  { type: 'video/mp4', codec: 'avc1.42E01E' },
  { type: 'video/webm', codec: 'vp9' }
];

for (const codec of codecs) {
  const support = video.canPlayType(codec.type + '; codecs="' + codec.codec + '"');

  if (support === 'probably') {
    console.log(`Browser most likely supports ${codec.type} with codec ${codec.codec}`);
  } else {
    if (support === 'maybe') {
      console.log(`Browser might support ${codec.type} with codec ${codec.codec}`);
    } else {
      console.log(`Browser does not support ${codec.type} with codec ${codec.codec}`);
    }
  }
}

You can fiddle around with both of the above code examples in this CodePen demo.

You can see in the codecs example that I'm using the 'probably' and 'maybe' values in a more applicable manner.

As usual, the safest way to deal with varying levels of media support is to provide proper fallbacks in your HTML using <source> elements. But this is a decent method to keep in mind should the need arise for some specific checks for media types and codecs.

Be sure to subscribe to Web Tools Weekly for more tips like this