Skip to content

Commit f474ed7

Browse files
Update documentation
1 parent 7f799de commit f474ed7

9 files changed

Lines changed: 1166 additions & 1692 deletions

File tree

CLAUDE.md

Lines changed: 221 additions & 106 deletions
Large diffs are not rendered by default.

CONTRIBUTING.md

Lines changed: 204 additions & 121 deletions
Large diffs are not rendered by default.

README.md

Lines changed: 119 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,164 @@
11
# FrameTrail
2+
23
## Open Hypervideo Environment
34

4-
### Create, Annotate & Remix Interactive Videos
5+
Create, annotate, and remix interactive videos on the web.
56

6-
## Overview
7+
FrameTrail is an open-source platform for building non-linear, interactive video experiences. Add 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.
78

8-
FrameTrail let's you experience, manage & edit non-linear interactive video in a simple and extendable online environment. FrameTrail can be easily customized for different purposes and view modes. Our aim is to allow authors the creation of open timebased media formats, which make full use of current web technology and support the remix culture that the web is built on.
9+
**No server required for viewing or editing.** FrameTrail runs entirely in the browser using the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) for local file editing, or with an Apache+PHP backend for multi-user collaboration.
910

10-
-----------------
11+
---
1112

1213
## Features
1314

15+
### Three Ways to Run
16+
17+
1. **Server mode** (Apache + PHP) — Full multi-user editing, file uploads, user management
18+
2. **Local folder mode** (Chrome/Edge) — Full editing without a server, using the File System Access API to read/write a local `_data` folder
19+
3. **Read-only mode** — Open `index.html` directly in any browser to view existing hypervideos
20+
1421
### Editing
15-
* Use any **HTML5 Video** or even an empty **Time Container** with a custom length as source
16-
* Add any resource as timebased **Overlay** or **Annotation**
17-
* Configure Overlay-Display (Opacity, etc.)
18-
* **Synchronize** Video Overlays with the main Video / Time Container (optional)
19-
* Add timebased **Videolinks** to other (internal or external) Hypervideo Documents
20-
* View, compare and re-use Annotations of other users
21-
22-
### Managing
23-
* Manage **users** (Access Rights, Activation)
24-
* Manage **resources** (Add / Upload, Edit, Delete)
25-
* Videos
26-
* Images
27-
* Wikipedia
28-
* Location (Open Streetmap)
29-
* Youtube Video
30-
* Vimeo Video
31-
* Any other Webpage URL
32-
* Manage any number of **Hypervideo Documents**
33-
34-
### Data Policy
35-
All data is kept in files using a structured JSON format, there is no database. Yes, that means you can just copy and paste your entire FrameTrail instance (including all user data etc.) to another server and it will instantly work.
22+
23+
- Use any **HTML5 video**, **YouTube**, **Vimeo**, or an empty **time container** as source
24+
- Add time-based **overlays** positioned on the video
25+
- Add **annotations** displayed alongside the video
26+
- Insert **code snippets** (JavaScript) triggered at specific timestamps
27+
- Create **video links** to other hypervideos (internal or external)
28+
- Add and sync **subtitles** (VTT format)
29+
- View, compare, and reuse annotations from other users
30+
31+
### Resource Types
32+
33+
FrameTrail supports a wide range of embeddable content:
34+
35+
| Category | Types |
36+
|----------|-------|
37+
| Media | Video (HTML5/HLS), Image, Audio, PDF |
38+
| Video platforms | YouTube, Vimeo, Wistia, Loom, Twitch |
39+
| Social/Web | X/Twitter, Bluesky, Mastodon, TikTok, Reddit, Flickr |
40+
| Audio/Music | Soundcloud, Spotify |
41+
| Presentations | Slideshare, Figma, Codepen |
42+
| Content | Text (rich HTML), Wikipedia, Webpage (iframe), URL Preview |
43+
| Interactive | Quiz, Hotspot, Location (OpenStreetMap), Entity (linked data) |
44+
45+
### Data & Portability
46+
47+
- All data stored as **JSON files** in a `_data` directory — no database
48+
- Copy the entire `_data` folder to move your instance between servers
49+
- Export/download data with the built-in **Save As** feature (works without server or File System Access API)
50+
- Annotations follow the **W3C Web Annotation** data model
3651

3752
### Browser Support
3853

39-
#### Desktop:
40-
* Latest Versions of Chrome and Firefox
41-
* Safari, Opera and Microsoft Edge if you're lucky (not tested)
42-
* Internet Explorer is not and won't be supported
54+
- **Desktop:** Chrome, Firefox, Edge (latest versions)
55+
- **Local folder mode:** Chrome/Edge (requires File System Access API)
56+
- **Mobile:** Player works, editing disabled
4357

44-
#### Mobile:
45-
* Editing Features are disabled on mobile platforms
58+
---
4659

47-
-------------
4860
## Installation
4961

50-
### Prerequisites
62+
### Option 1: Server Deployment (Apache + PHP)
5163

52-
* **Apache** Web Server (2.2.29 +) with **PHP** (5.6.2 +)
64+
1. Download the [latest release](https://github.com/OpenHypervideo/FrameTrail/releases) or build from source
65+
2. Extract to your web server directory
66+
3. Open in your browser and follow the setup wizard
67+
4. Create an admin account — you're ready to go
5368

54-
(any other configuration might also be fine, but this one has been tested)
69+
**Requirements:** Apache 2.2.29+ with PHP 5.6.2+. The web server needs write permissions to the installation directory.
5570

56-
Please note that you can use FrameTrail "read-only" locally without any server, as long as your browser supports local Ajax requests (there are known issues with Chrome, but Firefox should work in most cases). Of course you won't be able to use the editing features.
71+
### Option 2: Local Folder Mode (No Server)
5772

58-
### Setup
73+
1. Download and extract FrameTrail
74+
2. Open `index.html` in Chrome or Edge
75+
3. When prompted, select or create a `_data` folder on your computer
76+
4. Full editing — all changes saved directly to your local files
5977

60-
1. `git clone https://github.com/OpenHypervideo/FrameTrail` or **Download ZIP** to your **server directory** (i.e. `http://example.com/DIRECTORY-NAME` or `http://localhost/DIRECTORY-NAME` if you're using XAMMP, MAMP etc. for a local setup).
61-
2. Open your **server directory** in your favourite browser.
62-
3. Follow the instructions to define an administrator account and configure your FrameTrail instance.
78+
### Option 3: Read-Only Viewing
6379

64-
### Getting Started
80+
1. Open `index.html` in any modern browser
81+
2. If a `_data` folder with hypervideo data exists alongside the HTML files, it will be loaded for viewing
6582

66-
#### Adding your first hypervideo
83+
---
6784

68-
1. Click the Edit Button on the top right and login with your administrator account details.
69-
2. In the titlebar, click "New Hypervideo" and follow the instructions
85+
## Getting Started
7086

71-
#### Adding resources
87+
1. **Login** — Click the Edit button (top right) and log in with your admin account
88+
2. **Create a hypervideo** — In the titlebar, click "New Hypervideo" and choose a video source
89+
3. **Add resources** — Click "Manage Resources" to upload or link media
90+
4. **Edit** — Drag resources onto the video timeline as overlays or annotations
91+
5. **Share** — Copy the URL or use iframe embedding
7292

73-
1. Click the Edit Button on the top right and login with your administrator account details.
74-
2. In the titlebar, click "Manage Resources" to open the **Resource Manager**
75-
3. Click "Add Resource" and follow the instructions
76-
4. When your resource has been added, you and other users can use it as basis for new Hypervideos or for Overlays & Annotations
93+
---
7794

78-
-----------------
95+
## Development
7996

80-
## FAQ
97+
### Quick Start
8198

82-
Check out [frametrail.org/faq.html](http://frametrail.org/faq.html)
99+
```bash
100+
git clone https://github.com/OpenHypervideo/FrameTrail.git
101+
cd FrameTrail
102+
```
83103

84-
-----------------
104+
Point 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.
85105

86-
## Future Plans
106+
See [CONTRIBUTING.md](CONTRIBUTING.md) for the full development guide.
87107

88-
Check out [frametrail.org/roadmap.html](http://frametrail.org/roadmap.html)
108+
### Building for Production
89109

90-
-----------------
110+
```bash
111+
# Install build tools (one-time)
112+
npm install -g terser csso-cli
91113

92-
## Developers
114+
# Build
115+
bash scripts/build.sh
116+
```
93117

94-
### Getting involved
118+
This creates a `build/` directory with concatenated and minified JS/CSS bundles. See [docs/DEPLOYMENT.md](docs/DEPLOYMENT.md) for details.
95119

96-
Are you a developer and want to remix / improve / extend this software? Please head over to the [Contributors Guide](http://frametrail.org/contributing.html) and the [API Documentation](http://frametrail.org/docs.html).
120+
### Documentation
97121

98-
If you find bugs or have questions, please file an issue here or if you can fix it yourself send us a pull request.
122+
- [CONTRIBUTING.md](CONTRIBUTING.md) — Development setup, code style, branching, CI/CD
123+
- [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) — Module system, state management, storage modes, data model
124+
- [docs/EXTENDING.md](docs/EXTENDING.md) — Adding resource types, modules, localization
125+
- [docs/DEPLOYMENT.md](docs/DEPLOYMENT.md) — Server deployment, local usage, building, releasing
99126

100-
### Contributors
127+
---
101128

102-
Joscha Jäger, Michael J. Zeder, Michael Morgenstern, Olivier Aubert
129+
## Project Structure
103130

104-
-----------------
131+
```
132+
FrameTrail/
133+
├── src/ # Source code (runnable as-is for development)
134+
│ ├── index.html # Player/editor entry point
135+
│ ├── resources.html # Resource manager
136+
│ ├── setup.html # Setup wizard
137+
│ ├── _lib/ # Vendored third-party libraries
138+
│ ├── _shared/ # Core framework, shared modules, types, styles
139+
│ ├── player/ # Player-specific modules and types
140+
│ ├── resourcemanager/ # Resource manager launcher
141+
│ └── _server/ # PHP backend
142+
├── scripts/
143+
│ └── build.sh # Production build script
144+
├── .github/workflows/ # CI/CD (build verification + release packaging)
145+
├── docs/ # Developer documentation
146+
├── CLAUDE.md # AI assistant project guide
147+
├── CONTRIBUTING.md # Contributor guide
148+
├── LICENSE.md # MIT + GPL v3 dual license
149+
└── README.md # This file
150+
```
105151

106-
## License
152+
---
153+
154+
## Contributors
107155

108-
**FrameTrail** is dual licensed under [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL v3](http://www.gnu.org/licenses/gpl-3.0.html) Licenses.
156+
Joscha Jager, Michael J. Zeder, Michael Morgenstern, Olivier Aubert
157+
158+
---
159+
160+
## License
109161

110-
For more info check out the [License Details](LICENSE.md).
162+
FrameTrail is dual licensed under [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL v3](http://www.gnu.org/licenses/gpl-3.0.html).
111163

112-
-----------------
164+
See [LICENSE.md](LICENSE.md) for details.

0 commit comments

Comments
 (0)