Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Video Annotations in Drupal 8

Our first blog Video Annotations: A Powerful and Innovative Tool for Education explained power of videos in education when combined with features like video annotation and second blog Identification of an Open Source Video Annotations Tool for NVLI listed evaluation criteria of open annotation module that assisted NVLI project. This third blog in the series will involve defining the overall architecture of the Video Annotation solution in Drupal.

The Front facing user Page loaded the Video.js plugin and OVA plugin to support Annotations. The Plugins are integrated with Drupal using modules. An Annotation Store module is built to support Annotations from different tools. The Architecture provided for the actual Videos to be stored in a separate Video streaming Server.

Below are the details of the steps that need to be followed to configure the same in Drupal.

1. Install Video.js module for Drupal 8.

2. Install OVA for Drupal 8 to integrate with Open Annotation Plugin.

This Module allows:

  • Select formatters Ova Audio Formatter & Ova Video Formatter.
  • Allowable formats Video: mp4, ogg, youtube, webm Audio: mp3

3. Install Annotation_Store module. This Storage was built in a manner to support Open Annotation standards and capability to support multiple Front facing Annotation tools. As part of the project this store was simultaneously used by both OVA and Mirador modules.

Key Features are:

  • Annotation Store Module is mainly focused on storing the video annotation data [Open Video Annotation Library] locally in drupal.
  • This modules creates the annotation data as an entity in drupal 8 in the name of "annotation_store".
  • The entities which are created is listed at "/admin/annotation_store/list".
  • Annotation list link is provided at '/admin/content'.
  • Display date format at annotation list can be configured at /admin/config/media/annotation_store.
  • This information includes Annotation text, type, URI, user, created and changed time stamp.
  • Key actions supported are Create Annotations and Search & Fetch Annotations.

The Schema for Video Annotation:

{"rows":[{

  "permissions":{"read":[],"update":[],"delete":[],

  "admin":[]},

  "media":"video",

  "text":"Test",

  "ranges":[],

  "uri":"http:\/\/localhost\/drupal-8.1.2\/ova-page\/23",

  "id":"5",

  "target":{

    "container":"vjs_ova_",

    "ext":".mp4",

    "src":"http:\/\/localhost\/drupal-8.1.2\/sites\/default\/files\/amalia01.mp4"

  },

  "rangeTime":{

    "start":1.473551,

    "end":2.977551

    }

   }

 ]}

Features to be developed in future includes

  1. Spatial Annotation
  2. Video Transcripts

UniMity Solutions assisted in building Annotation feature for Audio and Video assets for NVLI. IIT Bombay supported contributing the work done in this project to Open Source.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web