Studio Overview
Introduction to the MP4E Studio video editor interface.
Introduction
MP4E Studio is a web-based video editor for creating interactive videos. It provides tools for:
- AI-powered object detection - Automatically detect and track objects
- Manual object editing - Refine polygons, merge objects, create groups
- Overlay creation - Add interactive elements at specific positions
- Plugin configuration - Build custom plugins with HTML/CSS/JS
- Rule-based interactivity - Define triggers, conditions, and actions
- Variable management - Create and manage dynamic state
- Export & embed - Generate embeddable videos with metadata
Interface Overview
The Studio interface is divided into four main areas:
┌────────────────────────────────────────────────────────────────────────┐
│ Header: Project name, View Mode, Preview toggle, Save, Export │
├──────────────┬───────────────────────────────────┬─────────────────────┤
│ │ │ │
│ Library │ │ Inspector / │
│ Panel │ Video Preview │ Player Panel │
│ │ │ │
│ [Tabs:] │ (Interactive preview │ Inspector: │
│ - Projects │ with overlays) │ - Object props │
│ - Overlays │ │ - Data fields │
│ - Plugins │ │ - Group settings │
│ │ │ - Actions │
│ [Entities:] │ │ │
│ - Objects │ │ Player: │
│ - Scenes │ │ - Controls skin │
│ - Groups │ │ - Markers │
│ - AI Scan │ │ - Thumbnails │
│ │ │ │
├──────────────┴───────────────────────────────────┴─────────────────────┤
│ Timeline │
│ ├────────────────────────────────────────────────────────────────────┤│
│ │ Frame: 125/3000 │ 00:05.00 / 02:00.00 │ ▶ ◀◀ ▶▶ │ 🔊 │ ││
│ ├────────────────────────────────────────────────────────────────────┤│
│ │████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░││
│ │ Object tracks: ═══════════ ════════════════ ═══ ││
│ └────────────────────────────────────────────────────────────────────┘│
└────────────────────────────────────────────────────────────────────────┘Library Panel (Left)
Browse project content: Projects (settings, events, variables), Overlays, and Plugins. The Entities section contains Objects, Scenes, Groups, and AI Scan.
Video Preview (Center)
Interactive preview showing the video with overlays, object tracking, and interactions rendered in real-time.
Right Panel (Context)
Switches between Inspector (object/overlay properties) and Player Panel (controls, markers, thumbnails).
Timeline (Bottom)
Navigate through frames, view object presence, and control playback. Scrub to see objects at different times.
Typical Workflow
- Upload & Process Video
Upload your video and run AI processing to detect objects automatically.
- Review & Refine Objects
Review detected objects, merge duplicates, refine polygon boundaries, and add custom labels.
- Create Object Groups
Group related objects (e.g., all products, all people) for easier management.
- Add Overlays & Plugins
Create interactive overlays attached to objects or at fixed positions.
- Configure Interactivity
Set up variables, define rules, and create interactive experiences.
- Preview & Test
Test interactions in the preview panel. Iterate on the design.
- Export & Deploy
Export the video with embedded metadata. Get the embed code.
Panel Reference
Library Panel Tabs
| Tab | Description |
|---|---|
| Projects | Project settings, global events/actions, and variable definitions |
| Overlays | Create and manage overlays organized by layer |
| Plugins | Custom plugins library - create, edit, import from marketplace |
Entities Section (within Library)
| Tab | Description |
|---|---|
| Objects | List of tracked objects with labels, frame ranges, and visibility |
| Scenes | Scene groups and individual scenes for navigation and chapters |
| Groups | Object groups with shared display settings and data schemas |
| AI Scan | Interactive object detection using SAM (Segment Anything Model) |
Inspector Panel (Right)
| When Selected | Shows |
|---|---|
| Object | Label, group assignment, custom data fields, frame range |
| Overlay | Position, size, layer, visibility, plugin config, event actions |
| Group | Display settings (hover/click behavior), data schema definition |
Player Panel (Right)
| Section | Description |
|---|---|
| Playback | Autoplay, loop settings |
| Controls | Enable/disable controls, select controls skin plugin |
| Interactions | Click and double-click behavior on video |
| Menu Config | Settings menu items, visibility, and position |
| Chapter Markers | Enable markers from scene groups, choose progress bar style |
| Thumbnails | Generate and configure thumbnail preview sprites |
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Space | Play/Pause |
| ← / → | Previous/Next frame |
| Shift + ← / → | Jump 10 frames |
| Home / End | Go to start/end |
| Cmd/Ctrl + S | Save project |
| Cmd/Ctrl + Z | Undo |
| Cmd/Ctrl + E | Export video |
| Delete | Delete selected |
| G | Group selected objects |
| O | Create overlay |
| P | Toggle polygon editor |
Getting Started
Ready to create your first interactive video? Follow these guides: