Integrating the Metadataplayer in an HTML page

WARNING ! This documentation refers to the latest version of Metadataplayer, available in the default branch in our repository http://www.iri.centrepompidou.fr/dev/hg/metadataplayer

Loading the script

The LdtPlayer-core.js must be declared in the HTML header.

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Metadataplayer integration test</title>
    <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
</head>

Declaration of a container HTML element

<body>
    <div id="Metadataplayer"></div>

The script for configuring and loading the Metadataplayer must be executed after this element is declared either by : - Adding a <script> element at the bottom of the page - Using an event such as body.onload - Using jQuery's $(function(){}) syntax or an equivalent in your favorite framework

<script type="text/javascript">

Interface language configuration

Language is defined ISO 639-1 (e.g., "es" pour l’Espagnol, "ja" pour le Japonais, "eu" pour le Basque). As of July 2012, only English ("en") and French ("fr") are available.

IriSP.language = "fr";

Library location configuration

By default (as defined in defaults.js), librairies are loaded from either a CDN (Content Distribution Network) or from the js/libs directory.

Configuration is done by overriding the properties of IriSP.libFiles

To use the CDN:

IriSP.libFiles.useCdn = true;

To change the location of the library directory:

IriSP.libFiles.defaultDir = "/path/libs";

To change individual locations or to point to files outside the default directory:

IriSP.libFiles.locations.jQueryUI = "libs/jquery-ui-1.8.16.custom.min.js";
IriSP.libFiles.locations.jwPlayerSWF = "libs/jwplayer/player.swf";

Configuration of metadata source

A metadata source is defined by its url and file type (which defines the serializer to use).

Example:

var metadataSource = {
    url: "data/mydata.json",
    type: "ldt"
};

Metadata sources are then used to configure both the video player and the widgets.

Configuration of the video player

The video player is configured through an object having the following properties:

Example:

var playerConfig = {
    metadata: metadataSource,
    type: "jwplayer",
    height: 350,
    width: 620,
    provider: "rtmp"
};

User Interface Configuration

L’interface se configure par un objet GUI, contenant les propriétés suivantes:

Exemple:

var guiConfig = {
    container : "Metadataplayer",
    default_options: {
        metadata: metadataSource
    },
    css : "metadataplayer/css/LdtPlayer-core.css",
    widgets: [
        {
            type: "Slider"
        },{
            type: "Controller",
            disable\_annotate\_btn: true
        },{
            type: "Segments",
            annotation\_type: "Chapters"
        },{
            type: "AnnotationsList",
            container: "AnnotationsListContainer"
        }
    ]
};

Instanciation du player

Le player s’instancie en créant un objet de type IriSP.Metadataplayer.

Exemple:

var config = {
    player: playerConfig,
    gui: guiConfig
};
var monPlayer = new IriSP.Metadataplayer(config);