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.
Comment | File | Size | Author |
---|---|---|---|
#20 | interdiff.txt | 565.25 KB | piyuesh23 |
#20 | annotation_plugin_for-2748851-20.patch | 581.71 KB | piyuesh23 |
#15 | video_annotation_plugin-2748851-6.patch | 16.45 KB | MRPRAVIN |
#4 | TextFieldFormatter.png | 15.46 KB | MRPRAVIN |
#4 | VideojsOpenVideoAnnotation.png | 57.27 KB | MRPRAVIN |
Comments
Comment #2
MRPRAVIN CreditAttribution: MRPRAVIN at UniMity Solutions Pvt Limited commentedComment #3
MRPRAVIN CreditAttribution: MRPRAVIN at UniMity Solutions Pvt Limited commentedHi,
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.
Comment #4
MRPRAVIN CreditAttribution: MRPRAVIN at UniMity Solutions Pvt Limited commentedComment #5
MRPRAVIN CreditAttribution: MRPRAVIN at UniMity Solutions Pvt Limited commentedComment #6
MRPRAVIN CreditAttribution: MRPRAVIN at UniMity Solutions Pvt Limited commentedPatch 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.
Comment #9
MRPRAVIN CreditAttribution: MRPRAVIN at UniMity Solutions Pvt Limited commentedThe 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.
Comment #10
MRPRAVIN CreditAttribution: MRPRAVIN at UniMity Solutions Pvt Limited commentedComment #15
MRPRAVIN CreditAttribution: MRPRAVIN at UniMity Solutions Pvt Limited commentedUTF-8 Format Changed in patch. Changed to Needs Review
Comment #16
MRPRAVIN CreditAttribution: MRPRAVIN at UniMity Solutions Pvt Limited commentedComment #19
piyuesh23 CreditAttribution: piyuesh23 at QED42 for National Virtual Library of India (NVLI), Indian Institute of Technology (IIT) Bombay commented@@ -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.
Comment #20
piyuesh23 CreditAttribution: piyuesh23 at QED42 for National Virtual Library of India (NVLI), Indian Institute of Technology (IIT) Bombay commented@pravin,
Patch missing text field formatter & styling for annotations. Adding them back.