Waldorf is a replacement video player for HTML5 videos which allows for viewing, creating, and modifying user-made annotations conforming to the W3C Web Annotation data model, and was created for the Media Ecology Project.
This project is in an early alpha phase. As such, please note that it's still rough around the edges; documentation and clarifying information will be fleshed out further as the project progresses.
The following instructions are for using this plugin with your website. You can find the latest version of the plugin in the Releases; if you'd like to build the plugin yourself, see How to Build.
You will need to import the above prerequisites and the files from the latest release on your page.
You can then use jQuery to reference a video object, and call annotate() on
it; the plugin will do the rest.
Example:
<script>
$("video").annotate();
</script>You can see a full example at /testpage/.
Information forthcoming.
For some reason, the vertical offset of the annotations are wrong (slightly raised) when the Chrome dev tools are open and the video is fullscreen. If anyone has an idea why, please let us know.
The following instructions are for building the plugin on your own machine.
This project is written in ES6 and is transpiled by Babel and Browserify into a bundled file.
Note that this project was developed with Visual Studio Code. It is highly recommended that you also use this.
- NPM
- Install the dependencies with NPM.
npm install
Building is done using Grunt. You can run any of the tasks with grunt taskName.
Tasks:
build- Bundles the source files into /dist/.make_release- Builds and compresses the final product for release.preview- Sets up live development environment with BrowserSync. Loads /testpage/.
- Grunt
- Babel
- Browserify
- Jonathan Cole - VEMILab - joncole.me
This project is licensed under the MIT License. Please see the LICENSE.md file for details.