Identification of an Open Source Video Annotations Tool for NVLI

Identification of an Open Source Video Annotations Tool for NVLI

As mentioned in our earlier blog on Video Annotations: A powerful and innovative tool for education, the most intriguing feature of the pilot version of NVLI is Video Annotation. UniMity Solutions assisted in building Annotation feature for Audio and Video assets. This involved identifying and integrating an open plugin that supported video and audio annotations and a generic annotation store module that was plugin agnostic.

The first step of the project was to identify a suitable plugin, open source tool that support the Annotation needs of the NVLI project.

The tools reviewed included popcorn.js and Open Annotation Plugin. Popcornjs provided by Mozilla Foundation is an HTML5 media framework written in java script for film makers, web developers and anyone who want to create time-based interactive media on the web. Annotations need to be pre created and made available through scripts. This plugin does not provide a user interface to create annotation. The Open Annotation Plugin met most of the requirements and was on top Video.js plugin, which has a lot of adoption in the Education space.

The identification and finalization of the tool was done through a systematic process of evaluating them against specific criteria. As Open Annotation Plugin requires Video.js, wherever required details of Video.js also provided.

Find below the criteria used to evaluate Open Annotation Plugin:

S.No	Criteria for Evaluation	Details
1	Name of Tool used	Open Video Annotation Project used with Video.js
2	Licensing
2.1	Licensing for Open Video Annotation Project	Open Video Annotation by Philip Desenne and Daniel Cebrián Robles is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
2.2	Licensing for Video.js	Licensed under the Apache License, Version 2.0
3	Standards compliance
3.1	Annotations	Compliant with Open Annotation data formats
3.2	Compliance	Open Annotation Data Model
3.3	HTML5 support	Video.js works with HTML5 only (Default failure msg built in) Key HTML5 features include, Video, audio tag, buffering and fall back.
3.4	Accessibility	Video.js Is accessible, need to review accessibility of Open Video Annotation Project
3.5	Browser	Google Chrome, Firefox, Safari, Internet Explorer 9
3.6	Device Compatibility	iPhone, iPad, Android
3.7	Video Formats supported	MP4, ogv, webm
4	Customization
4.1	UI using CSS	Possible to override Plugin CSS - By adding weight to the style classes.
4.2	Modular Code	API Methods to take control of the plugin are listed at GitHub
5	Functional Requirements
5.1	Out of box functionality - Standard Play/ Pause/ Stop; Volume Control	Yes
5.2	Annotations	Supports Annotations - Yes
5.3	Timeline based	Yes
5.4	Spatial	No
5.5	Unicode Text Support for Multilingual	Multilingual for annotations - This can be managed by Drupal as all annotations are saved as entity. More advanced understanding of the plugin's multilingual capability and the overall multilingual architecture will be taken up separately
5.6	Support for Text/ Rich Text/ Images/ Embed Videos/ Audio	Yes
5.7	Annotation Scope (Public and Private)	This has to be handled in Drupal. The annotation store will be stored as entity. The entity author will help track the author.
6	Community Support
6.1	Founder	Twitter ID of Daniel
6.2	Working Group	https://www.w3.org/community/openannotation/
6.3	IRC Channel	#videojs , no separate channel for open video annotation found
6.4	Newsletter	Not Available
6.5	Product Roadmap	One request for 3D Annotation is been raised - No clear date or plan for implementation
6.6	Usage Stats and Case studies	Top users of video.js - newspaper sites, "the ONION" and "theguardian"
7	Technology	Based on open-source java script libraries Extending Annotator Open Knowledge Foundation Project Build on top of the Video.js the open source HTML5 video player Compliant with Open Annotation data formats Customizable and mashable with open API's HTML5 components
8	Architecture	Annotateit - For storing annotation data Rangeslide JS - Simple, small and fast JavaScript/jQuery polyfill for the HTML5 ova JS - handles the java script for managing display and annotation creation UI on the HTML5 video.
9	Libraries Used/ Dependencies	Open Video Annotation Library/Videojs
10	Ease of Integration	Open Video Annotation Library - for Annotation Annotation Module helps to store the annotation data.
11	Security Compliance	Has to be handled by Drupal – Filtering text to prevent SQL Injection – For internal store Drupal will handle the security.

IIT Bombay wanted to leverage Open source technologies and share the work back to relevant communities and hence we choose this open tool. Integrating this with Drupal meant having it work with content types, Drupal entities and more.

Watch out our next blog for solution architecture in Drupal….