MP4E Studio - Interactive Video Editor

Overview

Studio is designed so you can author MP4E experiences visually, but everything you create becomes portable MP4E metadata that runs in the player runtime.

The MP4E mental model

MP4E interactivity is built from a few building blocks:

- Layers: organize overlays and control visibility as a group
- Overlays: UI elements on top of the video (fixed or object-bound)
- Plugins: what renders inside an overlay (core plugin, marketplace, or custom HTML/CSS/JS)
- Variables: state (numbers, strings, booleans, timers, lists...)
- Rules: "when X happens, if Y is true, do Z"
- Scenes: named time ranges and navigation targets

Layers & Overlays

Use layers to organize “modes” or “segments” of UI (e.g. default UI, premium UI, quiz UI). Overlays live inside layers, and can be fixed on the canvas or bound to tracked objects.

Keep overlays small and composable

Prefer multiple simple overlays over one massive overlay. It makes visibility rules and event actions much easier to reason about.

Variables

Variables are your state layer. Use them for personalization, gating, counters, timers, branching decisions, and dynamic templates inside plugins.

Variables connect everything

Variables are readable from rules and from plugin templates/scripts, so they’re the easiest way to make UI and logic stay in sync.

Rules & Actions

Rules are evaluated by the engine. The engine returns actions, and Studio executes them (play/pause/seek, set variables, show overlays, navigate, open URLs, show custom modals, and more).

Where to configure rules:

Project-level events: Library Panel → Projects → Events tab
Per-overlay actions: Select overlay → Inspector → Events section
Group display settings: Select group → Inspector → hover/click displays

Actions list (example)

1// Example: overlay click → set a variable → jump to a scene
2[
3  { "type": "setVariable", "variableId": "choice", "value": "A" },
4  { "type": "goToScene", "sceneId": "scene_path_a" }
5]

Prefer actions over custom code

Actions keep experiences portable and predictable. Use plugin scripts when you need custom UI behavior, then call actions via mp4e.executeActions().

Scenes & Branching

Scenes provide named navigation points. Use scenes for chapters, gated segments, and branching storylines.

See the full scene format

Go deeper in Metadata → Scenes & Navigation.

Preview Mode (Engine Runtime)

Preview mode runs the engine against your current editor state so rules, variables, layers, overlays, and plugin interactions behave like they will at runtime.

Use the event log while previewing

When preview is enabled, the engine event log shows triggers, evaluations, and executed actions—great for debugging complex logic.

Common Patterns

Age gate / paywall: variable-based layer visibility + playback bounds.
Chapters: scenes + clickable overlay navigation.
Quiz: per-question scenes + loop until answered + branch on selection.
Commerce: object group displays + “add to cart” events + custom modal checkout.