Remotion Rule: Can Decode

What it is

This is a Remotion Agent Skill rule that provides a reusable function to check whether a video file can be decoded by the browser before attempting playback. It uses Mediabunny to probe video and audio tracks, returning a boolean indicating decoder support.

The rule targets developers building programmatic videos with Remotion who need to validate source media before rendering. It prevents silent failures where a video appears blank because the browser lacks codec support for the input file.

How it saves time or tokens

Without decode checking, a Remotion render can fail silently -- producing a video with missing frames or no audio. Debugging these failures requires manually testing each source file. The canDecode() function catches unsupported formats upfront, saving hours of debugging.

The token estimate for this skill rule is approximately 500 tokens. It installs as part of the official Remotion Agent Skill collection and activates automatically in relevant contexts.

How to use

1. Install the Remotion skills collection:

npx skills add remotion-dev/skills

1. Install Mediabunny in your Remotion project:

npx remotion add mediabunny

1. Use the canDecode() function before rendering:

const isPlayable = await canDecode('https://example.com/video.mp4');
if (!isPlayable) {
  console.error('Video format not supported by browser');
}

Example

Complete canDecode implementation using Mediabunny:

import { Input, ALL_FORMATS, UrlSource } from 'mediabunny';

export const canDecode = async (src: string) => {
  const input = new Input({
    formats: ALL_FORMATS,
    source: new UrlSource(src, {
      getRetryDelay: () => null,
    }),
  });

  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;
};

Related on TokRepo

• AI Tools for Video -- Video generation and processing tools
• AI Tools for Coding -- Developer productivity tools and agent skills

Common pitfalls

• The function checks browser codec support, not general format validity. A file may be valid but use a codec the browser cannot decode (e.g., HEVC in Chrome without hardware support).
• canDecode() makes network requests to probe the file. For local files, ensure they are served via a local HTTP server rather than passed as file:// URLs.
• Mediabunny must match your Remotion version. Use npx remotion add mediabunny rather than installing directly via npm to ensure version compatibility.