FrameTrail is an open source software that lets you experience, manage and edit interactive video directly in your web browser. Add multimedia overlays, annotations or clickable links to any video — or create time-based presentations without video at all. All data is stored as portable JSON files.
Film shall be programmed with Open Web Technologies.
Open Source Film — By "rendering" a film, we permanently seal it and "burn" all its fragments (media assets, cuts, text overlays, effects, animations) irreversibly into one flat video file. We will never render or export hypervideos to flat video files.
Player and Editor are one — No separation of editor and viewer / player. Yes, that means anyone can edit any FrameTrail hypervideo anywhere (and then download or save the changes to their own FrameTrail installation).
-
Timebased Documents — Use any video or even an empty canvas with just a duration as a basis for synchronizing contents (like interactive transcripts, overlays or annotation timelines).
-
Hyperlinked Videos — Create non-linear networks of videos which are connected via clickable hotspots and can be freely navigated by the user (like branching narratives or interactive explainer videos).
-
Interactive Overlays — Place documents on top of the video (e.g. text, images, web pages, interactive maps or custom text/html) and decide how and when they should be displayed.
-
Multimedia Annotations — Add supplementing materials at certain points of time and decide how they should be displayed in the player using the interactive layout editor.
- All data stored as JSON files in a
_datadirectory — no database - Copy the entire
_datafolder to move your instance between servers - Export/download data with the built-in Save As feature (anyone can download hypervideos and then continue editing in their own FrameTrail installation or locally)
- Annotations follow the W3C Web Annotation data model
FrameTrail works in three modes with different capabilities.
| Server mode | Local folder mode | In-memory mode | |
|---|---|---|---|
| Requirements | PHP 7.4+ | Chrome or Edge | Any modern browser |
| Edit hypervideos (overlays, annotations, code snippets, layout, theme) | ✓ | ✓ | ✓ |
| Persistent saves | ✓ | ✓ | — (export via Save As) |
| Manage hypervideos (add / delete) | ✓ | ✓ | — |
| Manage resources (add / delete) | ✓ | ✓ | — |
| Thumbnail generation | ✓ (server-side) | ✓ (client-side) | — |
| Authentication & multi-user accounts | ✓ | — | — |
| Media transcoding | ✓ | — | — |
- Download the latest release or build from source
- Extract to any directory
- In that directory, run:
php -S localhost:8080 - Open
http://localhost:8080and follow the setup wizard
Requirements: PHP 7.4+. The directory needs write permissions so FrameTrail can create _data/.
For public deployments, use Apache (.htaccess included) or nginx with PHP-FPM. No PHP installed? Use XAMPP (Windows) or MAMP (Mac/Windows).
- Download and extract FrameTrail
- Open
index.htmlin Chrome or Edge - When prompted, select or create a
_datafolder on your computer - Full editing — all changes saved directly to your local files
- Enter edit mode — Click the Edit button (top right). In server mode, log in with your account or continue as a guest (name only). In local folder and in-memory modes, only the guest option is shown.
- Create a hypervideo — In the sidebar, click "New Hypervideo" and choose a video source
- Add resources — Click "Manage Resources" to upload or link media
- Edit — Drag resources onto the video timeline as overlays or annotations
- Save — In server/local mode, Ctrl+S saves directly. As a guest, use Save As to export your changes as JSON.
- Share — Copy the URL or export and share your hypervideo
git clone https://github.com/OpenHypervideo/FrameTrail.git
cd FrameTrailPoint your web server at the src/ directory. Open in your browser, complete the setup wizard, and start editing. Changes to source files take effect on reload — no build step needed for development.
See CONTRIBUTING.md for the full development guide.
# Install build tools (one-time)
npm install -g terser csso-cli
# Build
bash scripts/build.shThis creates a build/ directory with concatenated and minified JS/CSS bundles. See docs/DEPLOYMENT.md for details.
- CONTRIBUTING.md — Development setup, code style, branching, CI/CD
- docs/ARCHITECTURE.md — Module system, state management, storage modes, data model
- docs/EXTENDING.md — Adding resource types, modules, localization
- docs/DEPLOYMENT.md — Server deployment, local usage, building, releasing
Joscha Jäger, Michael J. Zeder, Michael Morgenstern, Olivier Aubert
FrameTrail is dual licensed under MIT and GPL v3.
See LICENSE.md for details.