openhypervideo / frametrail

FrameTrail is an open source software that let's you experience, manage and edit interactive video directly in your web browser. It enables you to hyperlink filmic contents, include additional multimedia documents (e.g. text overlays, images or interactive maps) and to add supplementing materials (annotations) at specific points.

FrameTrail

Open Hypervideo Environment

Create, Annotate & Remix Interactive Videos

Overview

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.

---

Features

Editing

• Use any HTML5 Video or even an empty Time Container with a custom length as source
• Add any resource as timebased Overlay or Annotation
• Configure Overlay-Display (Opacity, etc.)
• Synchronize Video Overlays with the main Video / Time Container (optional)
• Add timebased Videolinks to other (internal or external) Hypervideo Documents
• View, compare and re-use Annotations of other users

Managing

• Manage users (Access Rights, Activation)
• Manage resources (Add / Upload, Edit, Delete)
  • HTML5 Video (WEBM & MP4)
  • Image (JPG, PNG, GIF)
  • Wikipedia
  • Location (Open Streetmap)
  • Youtube Video
  • Vimeo Video
  • Any other Webpage URL
• Manage any number of Hypervideo Documents

Data Policy

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.

Browser Support

Desktop:

• Latest Versions of Chrome and Firefox
• Safari, Opera and Microsoft Edge if you're lucky (not tested)
• Internet Explorer is not and won't be supported

Mobile:

• Editing Features are disabled on mobile platforms

---

Installation

Prerequisites

• Apache Web Server (2.2.29 +) with PHP (5.6.2 +)

(any other configuration might also be fine, but this one has been tested)

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.

Setup

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).
2. Open your server directory in your favourite browser.
3. Follow the instructions to define an administrator account and configure your FrameTrail instance.

Getting Started

Adding your first hypervideo

1. Click the Edit Button on the top right and login with your administrator account details.
2. In the titlebar, click "New Hypervideo" and follow the instructions

Adding resources

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

---

FAQ

Check out frametrail.org/faq.html

---

Future Plans

Check out frametrail.org/roadmap.html

---

Developers

Getting involved

Are you a developer and want to remix / improve / extend this software? Please head over to the Contributors Guide and the API Documentation.

If you find bugs or have questions, please file an issue here or if you can fix it yourself send us a pull request.

Contributors

Joscha Jäger, Michael J. Zeder, Michael Morgenstern, Olivier Aubert

---

License

FrameTrail is dual licensed under MIT and GPL v3 Licenses.

For more info check out the License Details.

---

frametrail's Issues

Bug: impossible to create new project. Project Json Error

downloaded 9.5.1-beta
installed on MAMP on OSX 10.13.3
Entered Master Password
Entered a Project Name and description.
Save produced an error project json cannot be created.
further contact with project manager impossible.
See error in the screenshot.
Please help.

Image files to base64

• add resource thumbs (placeholder) and any other image files as base64 string to the respective css files (to avoid naming and path conflicts when exporting)

Implement locking mechanism

• Hypervideo needs to be "locked" (not editable by other users) when editing starts & unlocked when editing is finished (hint: current saving points / "Save?"-Dialog)
• Server needs to add "[filename].locked" files
• Client needs to signal begin and end of editing to the server
• Users need UI hints on what is happening ("Someone else is currently...")

Solve tag issues

• add central system definition of existing tags in /_data/tagdefinitions.json

• taxonomy includes mapping of shortform id to label (later maybe localization and description)

• add fields to single annotation entries (including current overlays etc.) to reference shortform id + label (in two separate fields)

• small extension of PHP server (deal with tagdefinitions.json, as well as updating it's contents based on tags used)

Video synchronisation > Buffering

• Implement loading / buffering / waiting routine for synchronized videos (managing readyStates)

Improve onboarding: Add more details to setup tutorial

As a first time user, I got stuck in the "Setup" part.
It would be nice to have a step-by-step tutorial on how to set up Frametrail locally with MAMP.

This could include:

• frequent pitfalls, e.g. forgetting the port number
• customization tutorials, e.g. how to increase the accepted media upload size in MAMP & MAMP Pro

Nice to have: A small explainer why it is necessary to set up a server anyway. Some users might be used to a backend that is entirely managed by the company.

VideoPlayer: Received no data within the time limit of 25 seconds

The red message VideoPlayer: Received no data within the time limit of 25 seconds comes up if opening https://demo.frametrail.org/examples/rezo-cdu/#hypervideo=3&t=385 on the Chromium Mobile Browser.

Maybe this also happen on the official Chrome Mobile browser for reproducing.

The first message is Loading.. and then the error message comes.

Project_index.json does not exist

I have done a clean installation of XAMPP on windows server 2016 and then got the FrameTrail app and created a masterpassword. Then i created a single project but then when i open localhost/Frametrail/ i get No Project.json File error.

what is the problem?

Missing _data folder

Hi!
How can i create the "_data" folder to make FrameTrail working?
Or can you commit a hello world sample _data folder?

Thanks
Lucas

Issue on install : An error occurred. Please try again

Hi,

Just after install and doing chmod -R 777 FrameTrail, i can create an account but i recieve the following error :
An error occurred. Please try again.

It seems the user is created, but then when i try to login i see this :

What can be the issue ?
Thanks.

User not loggin in with Masterpassword

I have logged in with master password but still shows error as below. How to create and manage users? Please help

tagdefinitions.json example

Thank you for creating such a nice open-source project. I am confused about tags. I cannot create tags from the GUI, and tagdefinitions.json is currently empty (containing only {}).
Would it be possible to share an example tagdefinitions.json file, or an explanation how to create tags?

Re-organize folder & file structure

• index.json only index, no data
• move data to hypervideo.json and merge with overlays.json, links.json, codesnippets.json and subtitles (import to JSON) into one single file ("clips", "events", "contents")
• subtitles are kept in existing structure & data model, decision to integrate into Web Annotation Data Model structure will be made later. subtitles will however be dealt with differently in the client (dynamic display in different views -> captions, interactive transcript, ...).
• annotations stay in the "annotations" directory with one file per user

Annotatins are not showing even after saving video

In demo if drop an annotation and save then go preview, i don't see annotation on the video

Docker Permissions Error

I'm working on this Dockerfile: https://github.com/edsilv/frametrail-now-deploy/blob/master/Dockerfile

It's deploying to now.sh, but when navigating to /FrameTrail I get:

As you can see I'm setting everything under /var/www to 755 and creating a _data directory. A bit stumped!

Unable to scrub video

Any attempt to skip video or scrub to some point in the middle causes the video to restart.

Data Storage Format

• Switch to Web Annotation Data Model (https://www.w3.org/TR/annotation-model/)
• Evaluate new IIIF Manifest / Presentation API v3 Format (Example: https://avd.lib.ncsu.edu/av/scrc/ua/ua024-002-bx0149-066-001/canvas.json)
• Extend Web Annotation Data Model with custom namespace (frametrail:) and definitions
• Unified Data Model and Controllers (for what are currently "overlays", "annotations", etc.)

How to increase PHP file size limits on Nginx?

when I try to upload a video that is larger than 8 MB I get this error:

I see the .htaccess that is bundled with FrameTrail tries to set the following values:

<IfModule mod_php5.c>
php_value post_max_size 900M
php_value upload_max_filesize 400M
php_value memory_limit 900M
php_value max_execution_time 259200
php_value max_input_time 259200
php_value session.gc_maxlifetime 1200
</IfModule>

But .htaccess isn't used by Nginx servers, so how would I set these values on my Nginx server?

Evaluate VideoContext Library

• Check if VideoContext (http://bbc.github.io/VideoContext/) can be used in FrameTrail
• Not as replacement for the core, but rather an additional type of "video source" (null video, video file, VideoContext canvas)
• For the moment without any editing features (just playback of the format & merging with code snippets)

Add CSS Editor & DataModel for Projects

• Add custom CSS Editor, Injection, UI and DataModel for each Project

I guess PHP 8.1 issues

Thanks for your quick response! The project looks very promising, I got it up and running, managed to upload a video and add a new hypervideo but the video (mp4) does not play.

I got this error:

2023/02/20 05:46:27 [error] 1405#1405: *18 FastCGI sent in stderr: "PHP message: PHP Deprecated: Return type of OpenGraph::current() should either be compatible with Iterator::current(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/FrameTrail/_server/opengraph.php on line 245; PHP message: PHP Deprecated: Return type of OpenGraph::next() should either be compatible with Iterator::next(): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/FrameTrail/_server/opengraph.php on line 247; PHP message: PHP Deprecated: Return type of OpenGraph::key() should either be compatible with Iterator::key(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/FrameTrail/_server/opengraph.php on line 246; PHP message: PHP Deprecated: Return type of OpenGraph::valid() should either be compatible with Iterator::valid(): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/FrameTrail/_server/opengraph.php on line 248; PHP message: PHP Deprecated: Return type of OpenGraph::rewind() should either be compatible with Iterator::rewind(): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/FrameTrail/_server/opengraph.php on line 244" while reading response header from upstream, client: 49.194.166.223, server: video.mediatoken.link, request: "POST /_server/ajaxServer.php HTTP/1.1", upstream: "fastcgi://unix:/run/php/php8.2-fpm.sock:", host: "############", referrer: "https://############/"

I'll keep adding them all under here if I get new ones...

Import / Export

Export

• directly in /_data/: add /_exports/ directory
• export routine copies template.html from /_shared/templates/ and replaces placeholders with JSON data (inline)
• for every export -> 1 directory (name = [date]_[id])
• inside the directory: 1 HTML file, 1 /files/ directory
• inside /files/ directory: 1 JS file, 1 CSS file, all used resource files (images, videos etc.)
  (JS and CSS files are located in /_shared/templates/ and generated by the build routine)

Import

• DOM parser reads HTML (script tags with data attributes) and calls PHP server methods to auto-create a new hypervideo for the current user based on the JSON import data
• user dialog for choosing which data is imported and to which user it is assigned
• tags are associated with existing tags in the system based on shortform id, if it doesn't exist, shortform id + label is added to /_data/taxonomy.json

Open a HTML <iframe> in the side panel

Hi!

Is possible to render a HTML code like <iframe> as annotation?
I want to implement that, so a embeded page could be rendered in the side panel.

Where in the code I could to implement it?

Lucas

Fix Safari multiple file upload

Multiple file upload has a long known bug in Safari, which causes the video upload to fail. More specifically, the file type validation fails. Safari-specific fix needed.

Test & fix CodeSnippet saving

Project _index.json does not exist

When creating a project via the UI, this is the error that shows.

Video synchronisation > Performance

• Switch to https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame and https://developer.mozilla.org/en-US/docs/Web/API/Performance/now to improve accuracy and performance
• Evaluate http://webtiming.github.io/timingsrc/ (avoiding time lacks and, potentially, allowing multi-device synchronisation)

Change all icons to custom icon font

• allow changing color values for icons in CSS variables editor

Adjust PHP server to new file structure

Add auto-saving

• every 20+ minutes (based on session)
• no-auto-saving, but dialog "don't forget to save -> save now, discard changes"

Add build system

Add routine which (based on config file and simple shell / bash script):

• copies and merges all files from src to build (1 JS file, 1 CSS file, HTML file)

• searches & replaces placeholders

• copies all 3 files to /_shared/templates/

• No uglify, no minify

probleme to installation

this installation no create user
can you help my

thanks

[Wed Jan 25 11:47:29.499756 2023] [proxy_fcgi:error] [pid 1289] AH01071: Got error 'PHP message: PHP Fatal error: Uncaught TypeError: in_array(): Argument #2 ($haystack) must be of type array, null given in /var/www/FrameTrail/_server/user.php:368\nStack trace:\n#0 /var/www/FrameTrail/_server/user.php(368): in_array()\n#1 /var/www/FrameTrail/_server/user.php(88): getUserColors()\n#2 /var/www/FrameTrail/_server/ajaxServer.php(301): userRegister()\n#3 {main}\n thrown in /var/www/FrameTrail/_server/user.php on line 368',

Check write permissions

Some FTP programs mess up the owner of uploaded directories.
Check owner and write permissions for enclosing folder and add a meaningful error message (and hint to fix) to the install routine.

video size limit 40 MB - can we adjust this limit?

Hi,
Most of our mp4 files are between 500 MB and 1TB.
Can we adjust some setting to allow for larger mp4 files?
Or do we need to cut the mp4 to chunks < 40 MB?
If so does FrameTrail support some way to play the final result of our editing or does this need to be exported back to mp4?

Thanks for helping out!

Add CSS Variables Editing UI

• Implement Editing UI, which allows users to change the global CSS variables
• Reflect changes live in the interface
• Add color picker for color vars

No config file found

I tried to install and configure FrameTrail on a server using apache, but when I try to go to /projectmanager an alert appears with "No config file." apparently the _data folder is missing, can any one help me as we need to use it in a youth camp that will have interactive video editing workshop.

Unable to install, create admin user -> PHP 8.1 error

Hello :)

Would love to evaluate this awesome looking software of yours but I got stuck during install. I'm trying to run it on a php8.1 Nginx Ubuntu server but I get a PHP error:

2023/02/20 02:41:02 [error] 17922#17922: *39 FastCGI sent in stderr: "PHP message: PHP Fatal error: Uncaught TypeError: in_array(): Argument #2 ($haystack) must be of type array, null given in /var/www/FrameTrail/_server/user.php:368
Stack trace:
#0 /var/www/FrameTrail/_server/user.php(368): in_array()
#1 /var/www/FrameTrail/_server/user.php(88): getUserColors()
#2 /var/www/FrameTrail/_server/ajaxServer.php(301): userRegister()
#3 {main}
thrown in /var/www/FrameTrail/_server/user.php on line 368" while reading response header from upstream, client: 49.194.166.223, server: video.mediatoken.link, request: "POST /_server/ajaxServer.php HTTP/1.1", upstream: "fastcgi://unix:/run/php/php8.2-fpm.sock:", host: "##########", referrer: "https://##########/setup.html"

Any help would be appreciated.
Thanks!!

help request getting FrameTrail going

Hi,
Not sure this is the right way to solve this, if not, please let me know. Trying anyway.
I'm running macos Catalina. Have installed xampp. That is running and php info checked.
Document root lives under /opt/lampp/htdocs
I cloned FrameTrail to this location, so it is at /opt/lampp/htdocs/FrameTrail

If I point my browser to http;//ip-of-xampp/FrameTrail/setup.html I get the FrameTrail interface asking me:

1. Admin Mail-address (login-name)
2. Admin Username
3. Admin Password

I can not get any further.
My interpretation is that I need to enter my mail-address, chose my admin-username and my admin-password and proceed from there.

However I only get: "An error occured. Please try again"

How to solve this? Thanks for helping out!

Video synchronisation > Time offsets

• Allow time offsets / fragments when synchronizing videos
• Currently only data model & implementation, editing UI for time offsets will be implemented later