Requirement
The users should be able to add annotations on the video type content, similar to how they can annotate on the flex paper viewer. The video content is played using jw player.
Proposed solutions
1. Awoga plugin for jw player - ( http://www.longtailvideo.com/addons/plugins/198/Awoga! ) There is a plugin called 'Awoga' for jw player which allows users to add comments. . We could use this to have timeline based annotations, added by a user. This is a simple plugin and integration with the jw player is straight forward. There are some limitations/issues with this plug in.
- The comment information is stored in the cloud and retrieved through the API provided by awoga. There is no provision to store the added annotation directly in the db now.
- The current implementation ,supports only the owner of the video to add annotations and the annotations will be displayed to all the people who watch the video. In case, if we want more than one person to annotate on the video and have the annotations be shown to only a few of the people, there is no straight forward support. We can achieve this by generating a different url for the video.
- The annotation preview is free only for 1000 views in a month. The licensing information can be found here. ( http://www.awoga.com/videoplugin.php )
- There is a link “Awoga” that appears on the video on mouse over and clicking on it will prompt us to add/edit an annotation on the video. As of now there is no way to change the link text to some thing like “Add annotations”.
2. Captions plugin for jw player -( http://www.longtailvideo.com/addons/plugins/84/Captions ) This is a plugin that displays captions from a saved XML file. This is a free plugin. However there is no UI for this to add options and save them in a file. If we have to go with this, we need to write a custom plugin that provides a UI to create annotations interactively and saves them in a specified XML file.
A common point about both of the plugins is that they do not store the position of the annotation in the layout. They display the annotation at the bottom.
So, the both of the above plugins cannot be used for our purpose.
Implemented Solution - Annotation JS Plugin
Currently the annotations for video content are implemented by using a JS Plugin for the JW player.
The idea of having this JS plugin is to have this functionality with simple DOM interactions by placing the elements on the div provided by jwplayer and using the java script API.
All of the annotations functionality is provided in three javascript files.
/crossbow/trunk/public/javascripts/annotations/annotation.js
/crossbow/trunk/public/javascripts/annotations/annotation_menu.js
/crossbow/trunk/public/javascripts/annotations/annotation_helper.js
- annotation.js - This is a jwplayer plugin and it provides the functionality to create, display and delete annotations. It's div tag covers the entire player UI ans the annotations are displayed on it. It provides the API methods to for the application interact and prform all annotation related actions. It uses the helper methods in annotation_helper.js.
- annotation_menu.js - This is a jwplyer plugin and it just provides the menu to interact with the annotation.js plugin. The menu is taken out so that . It is placed in a separate div tag below the control bar of player and the control bar can be interacted with.
- annotation_helper.js - This contains basic java script helper functions. The functions that do not require to modify the config values of annotation.js plugin are placed in this file.
JW player provides a div which is placed on top of the player. So, we are using two pulgins internally(annotation.js and annotation_menu.js) which work together to give the user experience as that of flex paper's annotations.
Usage
Make sure that all of the following files are included.
public/javascripts/annotations/annotation.js
public/javascripts/annotations/annotation_menu.js
public/javascripts/annotations/annotation_helper.js
public/jwplayer/jwplayer.js
public/dragdrop.js
public/stylesheets/others.css
The player can be embedded as below. A sample usage can be found at app/views/users/courses/_content_viewer.html.haml
#player
:javascript
jwplayer('player').setup({
height: '100%',
width: '100%',
id: 'playerId',
allowfullscreen: true,
allowscriptaccess: 'always',
flashplayer: '/jwplayer/player.swf',
file: "#{content.public_filename}",
source: '/jwplayer/player.swf',
plugins : {
'viral-2' : {'onpause': 'false', 'allowmenu' : 'false'},
'javascripts/annotations/annotation.js' : {
annotation_list: #{annotations_list},
asset_id: #{contentable.id}
},
'javascripts/annotations/annotation_menu.js' : {}
}
});
The viral-2 plugin default configuration is overridden so that the share form is not displayed as soon as the player pauses. This is just for better user experience .
configuration options to annotation.js
annotation_list - This is a json/javascript hash array of existing annoations for the video.
'annotation_list' : [{'annotation':{'asset_id':1,'author_id':1,'begin_at':182,'end_at':0,'id':72,'height':132,'width':142,
'content':'sample annotation','position_x':50,'position_y':50,guid':'e19e6173-b23d-40c5-883-b9ba2c5096bc',}}]
asset_id - The id of present video. This is passed in the params as asset_id when a new annotation is created.
{'asset_id': 15}
only_show (optional) - This is a boolean value(default is false). When it is true the user is not allowed to create/edit/delete the annotations on this video. He can only see them.
{'only_show': true}
configuration options to annotation_menu.js
only_show (optional) - This is a boolean value(default is false). When it is true the create annotation, delete buttons are not shown in the menu.
{'only_show': true}
Full screen mode issue with JS plugins
Java script plugins for JW player will not display any thing in full screen mode. The reason for this is - jwplayer full screen mode is nothing but the flash player's full screen mode. So, the DOM will not be available. This is a limitation from the player side.
The solutions possible for this are -
1. Disabling the default full screen mode of the jwplayer and have a full screen button on annotation menu. when he clicks on this we will resize the player and open it in browser window full screen.
2. Writing an action script plugin with same logic as the js plugin but a flash view.
Annotations App Flow
From the 'what i am working on panel', video content owner can add annotations on video.
Adding an annotation -
Say, we want to add a note which needs to show up from 00:02 to 00:33 during the video playback -
1) Start playing the video. Once the video reaches 00:02 click on “Create Note” button. Now, the video pauses at this moment and a form shows up with a text box where we can fill in the note. Once we are done writing the note, we should continue playing the video. Video can be dragged to 00:33 in controlbar directly or we can wait till the video plays itself to the desired scene. In our case it is 33 secs. Once the video reaches that point, we can click on “pause” link that is present in the white menu bar or on the video itself to pause it. Now, we can click on green “tick mark” icon to save the annotation. The annotation shows from 00:02 to 00:33. (We can click on the green tick icon without pausing the video too. The time line when we click on this icon is taken as the annotation end time).
We can click on 'close' icon of the annotation text box or cancel link of the white annotation menu to cancel the annotation without saving it.
Editing an annotation -
2) Let's say we want to edit the annotation added in step (1). To edit an already added annotation, video is played and when the annotation box appears on the video, we can click on the wrench icon of the annotation box. Now annotation menu bar shows when the annotation is being recorded from. In our case is is recording from 00:02.
Now, if we want to change the content of the annotation we can edit it in the annotation box and continue playing the video. If we want the annotation time line to be same we can click on tick icon at 00:33 itself. To edit the time line we can wait till the desired time and click on “tick” icon. Say, if we want this to be shown till 00:50 unlike previous 00:33, we can wait till that time and save it.
If we want to edit the start time of the annotation we need to delete it and re-create it as start time is used as mark reference.
Deleting an annotation -
3) Any point of time we can click on the “close” icon of the annotation box to remove the annotation.
Show/Hide annotations -
4) “Show Annotations” button is present both for the content creator and for learners. It toggles between states on and off when we click. At any point of the time this button needs to be clicked and highlighted with blue background to have the annotations visible. This is “on” state. Content creator can add/remove annotations only when 'Show annotations“ button is 'on'.
If users want to ignore annotations and stay focus on the video they click on this button to turn annotations “off”.
Sample screens -
