Features, Architecture and API

The lime player comes with a plugin architecture consisting of the CORE player component and optional Plugins. Each Component is described by its Features, Plugin Dependencies and Events provided for other Plugins.

Lime player Core

Features:

• The lime Player wraps a video player. The HTML5 player VideoJS is the default adapter but it can be overridden. The player is responsible for playing the video file using an HTML5 video element or a flash-based player, depending on the browser and platform. The adapter (see videojs-adapter.coffee as a reference on how to write an adapter.
• Load annotations for the video from the endpoint defined by the option annotFrameworkURL
• Defines a unified event-based (losely coupled) communication method between components
• Plugin architecture
• Handling the widget containers. These can be on the sides or theoretically anywhere in the DOM.

Browser compatibility

The Lime player is based on the VideoJS player. That means, if VideoJS doesn't work on a browser, Lime player won't either. Other than that, we could fix everything. If we would live long enough or this wouldn't be a so called prototype or proof of concept, but a product, we would. The compromise you see

Known (supposed) to work "supported" (by the ConnectMe project):

• Google Chrome 27+ (All platforms, tested on Windows, OSX, Ubuntu, Google TV)
• Mozilla Firefox 16+ (All platforms)
• Safari/Apple 5.1.9+

Not followed up entirely (not supported at the moment):

• Opera 12+

Known to not work or only partly (no plan to support):

• Internet Explorer

Loading process

1. Loading page

• Javascript, CSS
• Loading locators and annotations from CMF

2. Initializing video

• Init VideoJS player
• Init Plugins
• Load Linked data
• Initialize widgets

3. Start playing

Properties:

When writing a plugin, you can reach the lime player using this.lime. The following properties, methods and events are defined on this player instance.

• options: Hash containing all default or custom options
• player: the abstract player instance for controlling the player. Methods like play(), pause(), seek(), etc, and events like timeupdate, fullscreenchange, play are to be reached through this object. See videojs-adapter.coffee for reference on what methods and events you can use on it.
• annotations: Array of annotation objects loaded and instantiated at the beginning.
• plugins: Array of instantiated plugins. (A plugin normally doesn't need to use this.)

Methods:

• allocateWidgetSpace(options): Request the player for a widget instance. See dbpediainfoplugin.coffee for a reference on how to use a widget.
• seek(position): Jumps to the defined position into the video.
• getLength(): Returns the length of the video in seconds.
• currentTime(): Returns the current time position of the video.

Events:

• timeupdate with payload .currentTime: As time goes by and the player plays or the user seeks to a new position
• fullscreenchange with payload .isFullScreen: Fired whenever the player changes to or from full screen.

Annotations

Annotations are Annotation class entities. The purpose of them is to carry annotation information and events to and between the plugins. The properties/events described here are set/emitted by the player itself. However plugins can also fire events on an annotation to communicate to other plugins that concern about these events. An example is the Linked Data Plugin (LDPlugin) which loads resources in the background and on success it sets annotation.entities to contain the resource properties and fires the event ldloaded with the payload .entities. This way, other plugins don't have to implement the loading of an entity themselves.

Properties:

• start: start-time (sec)
• end: end-time (sec)
• isSpacial: describes whether or not the annotation describes a part of the picture. If this is true, there are also ** x, y, w, h: x, y coordinates, height and width of the selection. ** isPercent: Describing x, y, w, h values if they are to be interpreted as percentage values.
• resource: a URI object for easy handling of the resource URI
• relation: a URI object for easy handling of the relation URI
• fragment: a URI object for easy handling of the fragment URI
• state: 'active' or 'inactive' changed by the player automatically

Methods

• isBookmark(): boolean tells if the annotation type is Bookmark. Such an annotation points to a web page rather than a linked data resource. A bookmark can also have a preferred label. See the annotation description in the Integration Manual.

Events:

• becameActive, becameInactive: are fired whenever the annotation state changes to active/inactive
• mouseenter, mouseleave: mouse activities on a spacial annotation

Events

Events provide a flexible way of communication between components and objects in Javascript. A component can fire an event on an object even if no component is listening on the event and on the object. Components can set up or remove event listeners on objects at any time. lime uses jQuery events. Here you can see how to use them:

Firing an event:

... somewhere in a method ...
x = <some object>
e = jQuery.Event "<event name>", {<payload hash>}
jQuery(x).trigger e

Listening to an event:

x = <the object on which the event was triggered>
jQuery(x).bind "<event name>", (e) ->
    console.info e.<payload property>

Plugins

Plugins are described on the Plugins page

Technologies

The player uses html5 elements and is and is implemented in coffee scriped language. It uses VideoJS API for video events and the VIE for client side RDF representation and client-server communication.

Annotations

The annotation model uses open standards like RDF, Media Fragments and the Ontology for Media Annotations. Futhermore it is based on the Open Annotation Collaboration model. A full description of the model and an annotation sample can be found on [here](Annotation Sample).

Build and contribute

Installing build-dependencies

The player is written in CoffeeScript. You'll need to install NodeJS and run npm install in the project root folder. This will install the project dependencies for the automatic docu-generation with docco-husky and CoffeeScript compiler using npm install in the project root.

How to build

To build the project run cake build or cake watch to keep building the project continuously while you're editing the source files. This way you can focus on developing and build is done automatically whenever you save one of the source files.

For building the documentation use cake doc

Contribute and extend

Extending lime player is as easy as writing a plugin (in CoffeeScript or in JavaScript) and adding it to the configuration. See the Plugins page for further information.