skills.rest
mattwoodco
mattwoodcoCOMMUNITY
Explore all skills by this author →
Website𝕏@mattwoodcoGitHub

media-bunny

Convert videos between MP4, WebM, and MKV using WebCodecs in Next.js.

3|Updated Feb 14, 2026
Search Tags:#next.js#conversion#video processing#browser#mediabunny#webcodecs
One-click install
npx skills add https://github.com/mattwoodco/skills --skill media-bunny
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: media-bunny
Source: https://github.com/mattwoodco/skills/tree/main/skills/media-bunny
Command: npx skills add https://github.com/mattwoodco/skills --skill media-bunny

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mediabunny, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies video processing by enabling it directly within the browser, reducing server load and speeding up workflows for web applications.

Core Features & Use Cases

  • In-Browser Video Conversion: Convert videos between MP4, WebM, and MKV formats using the WebCodecs API.
  • Metadata Extraction: Read and process video metadata directly in the client.
  • Server Integration: Seamlessly save processed videos and their metadata to a database and storage.
  • Use Case: An e-learning platform can allow users to upload videos, convert them to a standard format for playback, and store them without needing a dedicated video processing backend.

Quick Start

Use the media-bunny skill to convert the uploaded video file to MP4 format.

Frequently Asked Questions about media-bunny

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert video files between MP4, WebM, and MKV in a Next.js browser app?▼

You can convert video files between MP4, WebM, and MKV formats directly in the browser using the WebCodecs API. This approach processes video client-side, reducing server load and speeding up web application workflows.

What is the WebCodecs API used for in browser video processing?▼

The WebCodecs API enables direct browser video processing, allowing web applications to read video metadata and convert formats like MP4 and WebM. This eliminates the need for a dedicated video processing backend.

Do I need a modern browser to use the WebCodecs API for video conversion?▼

Yes, browser-based video processing via the WebCodecs API requires modern browsers with WebCodecs support. Additionally, server-side storage and DB skills must be pre-installed to save processed videos and metadata.

How can I extract and store video metadata using Drizzle ORM in Next.js?▼

You can extract video metadata client-side using the WebCodecs API and integrate it with Drizzle ORM. This allows seamless tracking of processed video metadata by saving it directly to your database.

What are the limitations of client-side video conversion with WebCodecs?▼

Client-side video conversion is limited by browser compatibility, requiring modern browsers with WebCodecs support. It also depends on pre-installed server-side storage and database skills to save the processed output.

Related Skills

Explore More Software Engineering Skills→
BintzGavinBintzGavin
94

client-export-api

Export MP4 or WebM videos from Helios Player using the built-in VideoEncoder.

Community
Basic
tpotttpott

add-subtitles

Embed SRT subtitles into WEBM, MP4, or MKV videos using ffmpeg.

Community
Basic
mattwoodcomattwoodco
3

recording

Implement server-side LiveKit room recording with Egress API and S3 storage.

Community
Advanced
JosiahSiegelJosiahSiegel
51

ffmpeg-webassembly-workers

Transcode and manipulate videos in the browser using ffmpeg.wasm.

Community
Advanced