Skip to main content

Check if a video can be decoded using Mediabunny

Before attempting to load a video into <Video>, you may want to check if the video can be decoded by the browser. This can be done using Mediabunny.

Here's a canDecode() function you can copy and paste into your project:

can-decode.ts
import {ALL_FORMATS, Input, UrlSource, BlobSource} from 'mediabunny';

export const canDecode = async (src: string | Blob) => {
  const input = new Input({
    formats: ALL_FORMATS,
    source: typeof src === 'string' ? new UrlSource(src) : new BlobSource(src),
  });

  try {
    await input.getFormat();
  } catch {
    return false;
  }

  const videoTrack = await input.getPrimaryVideoTrack();
  if (videoTrack && !(await videoTrack.canDecode())) {
    return false;
  }

  const audioTrack = await input.getPrimaryAudioTrack();
  if (audioTrack && !(await audioTrack.canDecode())) {
    return false;
  }

  return true;
};

Usage​

Check if a video can be decoded​

const src = 'https://remotion.media/video.mp4';
const isDecodable = await canDecode(src);

if (isDecodable) {
  console.log('Video can be decoded');
} else {
  console.log('Video cannot be decoded');
}

See also​