MP4E Studio - Interactive Video Editor

Prerequisites

✓An MP4E-enhanced video file (with embedded metadata) or a video URL
✓A web application (React, vanilla JS, or any HTML page)

Don't have an MP4E video yet?

Create one using the MP4E Studio, or use our sample videos for testing.

Step 1: Install

npm install @mp4e/react

Includes the React component, engine, styles, and TypeScript types.

Step 2: Embed the Player

App.tsx

import { MP4EPlayer } from '@mp4e/react';
import '@mp4e/react/styles.css';

function App() {
  return (
    <MP4EPlayer
      src="https://your-cdn.com/video.mp4"
      onEvent={(event, data) => {
        console.log(event, data);
      }}
    />
  );
}

The component handles everything: metadata extraction, engine initialization, overlay rendering, and plugin sandboxing. You only need the src prop.

Automatic Metadata Extraction

Both MP4EPlayer (React) and extractMP4EMetadata() (vanilla) automatically read the embedded metadata from the MP4 file. No server-side processing needed — the extraction happens client-side using the WASM engine.

Step 3: Handle Events

The engine emits events for object interactions, display changes, plugin activity, and playback actions. Subscribe to respond to user interactions:

App.tsx

<MP4EPlayer
  src="https://your-cdn.com/video.mp4"
  onEvent={(event, data) => {
    switch (event) {
      case 'state:ready':
        console.log('Engine initialized');
        break;
      case 'metadata:loaded':
        console.log('Metadata loaded', data);
        break;
      case 'object:click':
        console.log('Object clicked:', data.objectId);
        break;
      case 'display:show':
        console.log('Display shown:', data);
        break;
    }
  }}
/>

See the full Events Reference for all available event types.

Step 4: Customize

Control playback, inject host metadata, configure security policies, and gate actions:

CustomizedPlayer.tsx

<MP4EPlayer
  src="https://your-cdn.com/video.mp4"

  // Playback
  autoplay={false}
  muted={false}
  loop={false}

  // Host configuration
  config={{
    sandbox: { level: 'standard' },
    gatedActions: ['navigate', 'openUrl'],
  }}

  // Metadata injection (host layers, plugins, rules)
  overrides={{
    layers: [{ id: '__brand__', name: 'Branding', overlays: [/* ... */] }],
  }}

  // Security callbacks
  onActionGate={(action, approve, deny) => {
    if (confirm(`Allow action: ${action.type}?`)) approve();
    else deny();
  }}

  // Events
  onEvent={(event, data) => console.log(event, data)}
/>

Host Configuration

Sandbox levels, action gating, disabled plugins, trusted signers, content restrictions. See the Configuration guide.

Metadata Overrides

Inject layers, plugins, variables, and settings into any video without modifying the file. See the Overrides guide.

Props Reference

All available player props — playback, display, security, performance. See the Props Reference.

Methods

Programmatic control — set variables, execute actions, manage displays. See the Methods Reference.

Next Steps

🔌

Build Custom Plugins →

Create interactive overlays, modals, service plugins, and custom controls

⚡

Actions Reference →

Explore all 65+ available actions for building interactive experiences

🎬

Use the Studio →

Create and edit interactive videos visually — no code required

Quick Start