Recipe 18.4

Determining the System Media Capabilities

The Media Capabilities API lets you query the browser to determine what audio and video media types are supported.

Demo

audio/mp3:
audio/webm:

Code

JavaScript

navigator.mediaCapabilities.decodingInfo({
  type: 'file',
  audio: {
    contentType: 'audio/mp3'
  }
}).then(result => {
  document.querySelector('#mp3').textContent = result.supported ? 'Supported' : 'Not supported';
});

navigator.mediaCapabilities.decodingInfo({
  type: 'file',
  audio: {
    contentType: 'audio/webm;codecs=opus'
  }
}).then(result => {
  document.querySelector('#webm').textContent = result.supported ? 'Supported' : 'Not supported';
});

HTML

<ul>
  <li><code>audio/mp3</code>: <span id="mp3"></span></li>
  <li><code>audio/webm</code>: <span id="webm"></span></li>
</ul>