|
1 | 1 | # FrameTrail |
| 2 | + |
2 | 3 | ## Open Hypervideo Environment |
3 | 4 |
|
4 | | -### Create, Annotate & Remix Interactive Videos |
| 5 | +Create, annotate, and remix interactive videos on the web. |
5 | 6 |
|
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. |
7 | 8 |
|
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. |
9 | 10 |
|
10 | | ------------------ |
| 11 | +--- |
11 | 12 |
|
12 | 13 | ## Features |
13 | 14 |
|
| 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 | + |
14 | 21 | ### 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 |
36 | 51 |
|
37 | 52 | ### Browser Support |
38 | 53 |
|
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 |
43 | 57 |
|
44 | | -#### Mobile: |
45 | | -* Editing Features are disabled on mobile platforms |
| 58 | +--- |
46 | 59 |
|
47 | | -------------- |
48 | 60 | ## Installation |
49 | 61 |
|
50 | | -### Prerequisites |
| 62 | +### Option 1: Server Deployment (Apache + PHP) |
51 | 63 |
|
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 |
53 | 68 |
|
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. |
55 | 70 |
|
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) |
57 | 72 |
|
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 |
59 | 77 |
|
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 |
63 | 79 |
|
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 |
65 | 82 |
|
66 | | -#### Adding your first hypervideo |
| 83 | +--- |
67 | 84 |
|
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 |
70 | 86 |
|
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 |
72 | 92 |
|
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 | +--- |
77 | 94 |
|
78 | | ------------------ |
| 95 | +## Development |
79 | 96 |
|
80 | | -## FAQ |
| 97 | +### Quick Start |
81 | 98 |
|
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 | +``` |
83 | 103 |
|
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. |
85 | 105 |
|
86 | | -## Future Plans |
| 106 | +See [CONTRIBUTING.md](CONTRIBUTING.md) for the full development guide. |
87 | 107 |
|
88 | | -Check out [frametrail.org/roadmap.html](http://frametrail.org/roadmap.html) |
| 108 | +### Building for Production |
89 | 109 |
|
90 | | ------------------ |
| 110 | +```bash |
| 111 | +# Install build tools (one-time) |
| 112 | +npm install -g terser csso-cli |
91 | 113 |
|
92 | | -## Developers |
| 114 | +# Build |
| 115 | +bash scripts/build.sh |
| 116 | +``` |
93 | 117 |
|
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. |
95 | 119 |
|
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 |
97 | 121 |
|
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 |
99 | 126 |
|
100 | | -### Contributors |
| 127 | +--- |
101 | 128 |
|
102 | | -Joscha Jäger, Michael J. Zeder, Michael Morgenstern, Olivier Aubert |
| 129 | +## Project Structure |
103 | 130 |
|
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 | +``` |
105 | 151 |
|
106 | | -## License |
| 152 | +--- |
| 153 | + |
| 154 | +## Contributors |
107 | 155 |
|
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 |
109 | 161 |
|
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). |
111 | 163 |
|
112 | | ------------------ |
| 164 | +See [LICENSE.md](LICENSE.md) for details. |
0 commit comments