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….