Plugins and data

All the visualization and edition tools of amalia.js are plugins. The player core incorporates a manager responsible for loading metadata, instantiating plugins and initializing them. We follow an object oriented architecture design. Thus, all the plugins inherits from the fr.ina.amalia.player.plugins.PluginBase class, which you should extend if you plan to develop your own plugins.

First, we need to load some metadata in order to display them. This is achieved through data services. A data service is responsible for loading metadata blocks. Currently, we have one simple data service implementation that loads the Json metadata blocks over HTTP. The data services is able to manage different formats and protocols. You just have to provide a list of URLs that will be accessed to retrieve the metadata. These URLs can be whatever you want, either simple Json files or dynamic web application like a REST api. In the following example, we load data from two URLs :


$("#myplayer").mediaPlayer({

        src : "samples-data/examples/vid/amalia01.mp4",

        plugins: {

                dataServices: [

                        'samples-data/examples/json/amalia01-events.json',

                        'samples-data/examples/json/amalia01-kf.json'

                ]

        }

});

        

It is now possible to stream metadata from the server through a web socket. A server side example of such a service will soon be available in the amalia-tools project.


$("#myplayer").mediaPlayer({

        src : "samples-data/examples/vid/amalia01.mp4",

        plugins: {

                dataServices: [

                    { protocol : 'fr.ina.amalia.player.WsLoader',//ws

					  url : 'ws://app01-player-i.sas.ina:10080/wstest/data',

					  format : 'json'

					}

                ]

        }

});

        

Once the metadata are loaded, amalia.js try to instantiate the visualization plugins. You can instantiate as many plugins of each type as you want. For each plugin instance, you have to provide the following initialization informations :

Options Type Description
className String the plugin class name
container String if needed, the HTML5 div id where the plugin will be displayed.
parameters Object all the specific parameters for this type of plugin, depends on the class.

All the plugins are declared in the list field :


$("#myplayer").mediaPlayer({

        src : "samples-data/examples/vid/amalia01.mp4",

        plugins: {

                dataServices: [

                        ...

                ],

                list: [

                        {   'className': 'fr.ina.amalia.player.plugins.Plugin1',

                            'container': '#myplayer-plugin1',

                            'parameters': {

                               ...

                            }

                        },

                        {   'className': 'fr.ina.amalia.player.plugins.Plugin2',

                            'container': '#myplayer-plugin2',

                            'parameters': {

                               ...

                            }

                        }

                ]

        }

});

        

You may just have a look at the source code of this page to see other examples.

Documentation