Working on Annotation plugin for videojs using open video annotation project. Please suggest if you would be willing to add support for video annotations within this project. If yes i will able to share the code with you and maintain it as against creating a separate module.

For Data store of annotations, am looking at working with "Annotations Module"

Architecture and more details on the module:

Propose to build Open Annotation as a sub module. Enabling the module will provide for a flag to disable/enable annotations as part of the video js configuration.

There will also be a settings form for configuring the Data store server. Which can be connected to an in Drupal service using Annotations module or an external server.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

MRPRAVIN created an issue. See original summary.

MRPRAVIN’s picture

Issue summary: View changes
MRPRAVIN’s picture

Hi,

I attached Open Video Annotation Support for "Videojs HTML5 Player Module" in Drupal 8 simple patch here.

This module supports annotations in videojs html5 player which has extensions mp4,webm,youtube & vimeo which is hard coded now. Further updates will be user friendly and also you should create "Videojs Textfield" Text field for Enable Open Video Annotation Plugin. the machine name should be "field_videojs_textfield" this can be altered in future for user friendly.

This module allows "Videojs TextField Formatter" by creating "Videojs Textfield". Similarly this module works with file/video field types(only support mp4 extension file).

CSS & JS files are found at: https://github.com/CtrHellenicStudies/OpenVideoAnnotation. Make sure to avoid jquery conflict you should use WRAPPING method for all js files and also create jquery-noconflict.js file which contains the mentioned code

var jQuery13 = jQuery;
jQuery.noConflict(true);

Other js files should be wrapped like (function($){ //js code })(jQuery); // This will avoid core jquery conflictions.
Load the js files should be in the correct order. (Refer to: videojs.libraries.yml file)

To Load the plugin Open Video Annotation you should load addannotatebutton.js file.
Pros and Cons are welcome.

MRPRAVIN’s picture

Status: Active » Needs review
FileSize
57.27 KB
15.46 KB
MRPRAVIN’s picture

MRPRAVIN’s picture

Patch Updated For Settings Form in Videojs Annotation Plugin with TextField Formatter as well as File and Video Fields.

This Patch Currently Supports mp4,webm,ogg Formats.

youtube format support only when enabling "Enable Annoation checkbox in Videojs Player formatter/Videojs Player Textfield Formatter" settings. Other formats works fine.

Pros and Cons are welcome.

Status: Needs review » Needs work

The last submitted patch, 6: video_annotation_plugin-2748851-6.patch, failed testing.

The last submitted patch, 6: video_annotation_plugin-2748851-6.patch, failed testing.

MRPRAVIN’s picture

Version: 7.x-3.x-dev » 8.x-1.x-dev
Status: Needs work » Needs review

The Created issue initially in drupal 7 version. The above patch was in drupal 8 version. I updated the Project version 7 to 8.x-1.x-dev.

The last submitted patch, 3: VideojsAnnotationPlugin-2748851-3.patch, failed testing.

The last submitted patch, 3: VideojsAnnotationPlugin-2748851-3.patch, failed testing.

Status: Needs review » Needs work

The last submitted patch, 10: video_annotation_plugin-2748851-6.patch, failed testing.

The last submitted patch, 10: video_annotation_plugin-2748851-6.patch, failed testing.

MRPRAVIN’s picture

UTF-8 Format Changed in patch. Changed to Needs Review

MRPRAVIN’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 15: video_annotation_plugin-2748851-6.patch, failed testing.

The last submitted patch, 15: video_annotation_plugin-2748851-6.patch, failed testing.

piyuesh23’s picture

@@ -51,17 +54,42 @@ class VideoJsPlayerListFormatter extends VideoJsPlayerFormatter implements Conta
+ if ($this->getSetting('annotations') == 0) {
+ $elements[] = array(
+ '#theme' => 'videojs',
+ '#items' => $video_items,
+ '#player_extension' => $ext,
+ '#player_attributes' => $this->getSettings(),
+ '#attached' => array(
+ 'library' => array('videojs/videojs'),
+ ),
+ );

This doesn't look optimal. I would rather initialize the variable & update 'library' index conditionally.

piyuesh23’s picture

@pravin,

Patch missing text field formatter & styling for annotations. Adding them back.