1---
2name: can-decode
3description: Check if a video can be decoded by the browser using Mediabunny
4metadata:
5  tags: decode, validation, video, audio, compatibility, browser
6---
7 
8# Checking if a video can be decoded
9 
10Use Mediabunny to check if a video can be decoded by the browser before attempting to play it.
11 
12First, install the right version of Mediabunny:
13 
14```bash
15npx remotion add mediabunny
16```
17 
18## The `canDecode()` function
19 
20This function can be copy-pasted into any project.
21 
22```tsx
23import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
24 
25export const canDecode = async (src: string) => {
26  const input = new Input({
27    formats: ALL_FORMATS,
28    source: new UrlSource(src, {
29      getRetryDelay: () => null,
30    }),
31  });
32 
33  try {
34    await input.getFormat();
35  } catch {
36    return false;
37  }
38 
39  const videoTrack = await input.getPrimaryVideoTrack();
40  if (videoTrack && !(await videoTrack.canDecode())) {
41    return false;
42  }
43 
44  const audioTrack = await input.getPrimaryAudioTrack();
45  if (audioTrack && !(await audioTrack.canDecode())) {
46    return false;
47  }
48 
49  return true;
50};
51```
52 
53## Usage
54 
55```tsx
56const src = "https://remotion.media/video.mp4";
57const isDecodable = await canDecode(src);
58 
59if (isDecodable) {
60  console.log("Video can be decoded");
61} else {
62  console.log("Video cannot be decoded by this browser");
63}
64```
65 
66## Using with Blob
67 
68For file uploads or drag-and-drop, use `BlobSource`:
69 
70```tsx
71import { Input, ALL_FORMATS, BlobSource } from "mediabunny";
72 
73export const canDecodeBlob = async (blob: Blob) => {
74  const input = new Input({
75    formats: ALL_FORMATS,
76    source: new BlobSource(blob),
77  });
78 
79  // Same validation logic as above
80};
81```
82