Film shall be programmed with Open Web Technologies.
FrameTrail is an open source software that lets you experience, manage and edit interactive video directly in your web browser. Add multimedia overlays, annotations, video links, and code snippets to any video — or create time-based presentations without video at all. All data is stored as portable JSON files with no database required.
FrameTrail works in three modes with different capabilities. A PHP backend provides the full feature set: multi-user accounts, collaborative editing, file uploads, and optional media processing. In Chrome/Edge, the File System Access API enables single-user local editing with file uploads, but without transcoding or user management. In any browser — including Firefox and Safari — an in-memory mode lets you view and edit contents and export changes as JSON.
- Server mode (Apache + PHP) — Multi-user accounts, collaborative editing, file uploads, optional media transcoding and thumbnail generation
- Local folder mode (Chrome/Edge) — Single-user editing saved directly to a local
_datafolder via the File System Access API; file uploads supported, no transcoding or user management - In-memory mode (all browsers) — View and edit in-browser; no persistent saves (export changes as JSON via Save As); no file uploads.
- Use any HTML5 video, YouTube, Vimeo, or an empty time container as source
- Add time-based overlays positioned on the video
- Add annotations displayed alongside the video
- Insert code snippets (JavaScript) triggered at specific timestamps
- Create video links to other hypervideos (internal or external)
- Add and sync subtitles (VTT format)
- View, compare, and reuse annotations from other users
FrameTrail supports a wide range of embeddable content:
| Category | Types |
|---|---|
| Media | Video (HTML5/HLS), Image, Audio, PDF |
| Video platforms | YouTube, Vimeo, Wistia, Loom, Twitch |
| Social/Web | X/Twitter, Bluesky, Mastodon, TikTok, Reddit, Flickr |
| Audio/Music | Soundcloud, Spotify |
| Presentations | Slideshare, Figma, Codepen |
| Content | Text (rich HTML), Wikipedia, Webpage (iframe), URL Preview |
| Interactive | Quiz, Hotspot, Location (OpenStreetMap), Entity (linked data) |
- 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 (works without server or File System Access API)
- Annotations follow the W3C Web Annotation data model
- Desktop: Chrome, Firefox, Edge, Safari (latest versions)
- Local folder mode: Chrome/Edge only (requires File System Access API)
- In-memory/download mode: All browsers — Firefox and Safari get full view + edit + export
- Mobile: Player works in server mode; editing is disabled
- 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 titlebar, 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 use iframe embedding
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
FrameTrail/
├── src/ # Source code (runnable as-is for development)
│ ├── index.html # Player/editor entry point
│ ├── resources.html # Resource manager
│ ├── setup.html # Setup wizard
│ ├── _lib/ # Vendored third-party libraries
│ ├── _shared/ # Core framework, shared modules, types, styles
│ ├── player/ # Player-specific modules and types
│ ├── resourcemanager/ # Resource manager launcher
│ └── _server/ # PHP backend
├── scripts/
│ └── build.sh # Production build script
├── .github/workflows/ # CI/CD (build verification + release packaging)
├── docs/ # Developer documentation
├── CLAUDE.md # AI assistant project guide
├── CONTRIBUTING.md # Contributor guide
├── LICENSE.md # MIT + GPL v3 dual license
└── README.md # This file
Joscha Jäger, Michael J. Zeder, Michael Morgenstern, Olivier Aubert
FrameTrail is dual licensed under MIT and GPL v3.
See LICENSE.md for details.