Updated docs and test suite players-as-widgets
authorveltr
Wed, 19 Sep 2012 14:10:38 +0900
branchplayers-as-widgets
changeset 960 9a278b9e3b05
parent 959 ee11ed1b739e
child 961 e1baacb52075
child 962 3a7af8626620
Updated docs and test suite
doc/eventslist.txt
doc/integration.en.md
doc/integration.fr.md
doc/widget-api.fr.md
src/js/defaults.js
src/widgets/Controller.js
src/widgets/Slider.js
src/widgets/Trace.js
test/audiomp3.htm
test/ext-trace.htm
test/jwplayer.htm
test/mp4video.htm
test/oggvideo.htm
test/renkan.htm
test/slideshare.htm
test/vimeo.htm
--- a/doc/eventslist.txt	Tue Sep 18 15:39:28 2012 +0900
+++ b/doc/eventslist.txt	Wed Sep 19 14:10:38 2012 +0900
@@ -1,8 +1,79 @@
-Event Name                      Published by                    Subscribed by
-==============================  ==============================  ==============================  
-Annotation.hide                                                 Annotation
-Annotation.show                                                 Annotation
-Annotation.minimize                                             Annotation
-Annotation.maximize                                             Annotation
-Annotation.getBounds                                            Annotation
-Arrow.updatePosition            Annotation
\ No newline at end of file
+Event Name                                  Published by                    Subscribed by
+
+==========================================  ==============================  ==============================
+
+Annotation.boundsChanged                    Annotation                      Slice
+
+Annotation.getBounds                        Segments                        Annotation
+
+Annotation.hide                                                             Annotation
+
+Annotation.maximize                         CreateAnnotation                Annotation
+     =                                      Tweet
+
+Annotation.minimize                         CreateAnnotation                Annotation
+     =                                      Tweet
+
+Annotation.show                                                             Annotation
+
+AnnotationsList.refresh                     CreateAnnotation                AnnotationsList
+     =                                      Tagger
+
+Arrow.release                               Segments                        Arrow
+
+Arrow.takeover                              Segments                        Arrow
+
+Arrow.updatePosition                        Annotation                      Arrow
+     =                                      Segments
+     =                                      Slider
+
+CreateAnnotation.toggle                     Controller                      CreateAnnotation
+
+createAnnotationWidget.addedAnnotation           X                          AnnotationsList
+
+Mediafragment.setHashToAnnotation           Polemic                         Mediafragment
+     =                                      Renkan                               =
+     =                                      Segments                             =
+
+Mediafragment.setHashToTime                 Slider                               X
+
+Player.MouseOver                            Controller                      Slider
+
+Player.MouseOut                             Controller                      Slider
+
+search                                      Controller                      AnnotationsList
+     =                                           =                          Polemic
+     =                                           =                          Segments
+     =                                           =                          Tagcloud
+
+search.closed                               Controller                      AnnotationsList
+     =                                           =                          Polemic
+     =                                           =                          Segments
+     =                                           =                          Tagcloud
+
+search.cleared                              Controller                      AnnotationsList
+     =                                      Renkan                          Polemic
+     =                                           =                          Segments
+     =                                           =                          Tagcloud
+
+search.matchFound                           AnnotationsList                 Controller
+     =                                      Polemic                              =
+     =                                      Segments                             =
+
+search.noMatchFound                         AnnotationsList                 Controller
+     =                                      Polemic                              =
+     =                                      Segments                             =
+
+search.open                                 Controller
+
+search.triggeredSearch                      Annotation                      Controller
+     =                                      Renkan                               =
+     =                                      Tagcloud                             =
+
+Slice.boundsChanged                         Slice                           CreateAnnotation
+
+Slice.hide                                  CreateAnnotation                Slice
+
+Slice.show                                  CreateAnnotation                Slice
+
+Tweet.show                                  Polemic
\ No newline at end of file
--- a/doc/integration.en.md	Tue Sep 18 15:39:28 2012 +0900
+++ b/doc/integration.en.md	Wed Sep 19 14:10:38 2012 +0900
@@ -51,7 +51,7 @@
     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 ##
+## Configuration of a metadata source ##
 
 A metadata source is defined by its url and file type (which defines the *serializer* to use).
 
@@ -66,42 +66,21 @@
 
 ## Configuration of the video player ##
 
-The video player is configured through an object having the following properties:
-
-- **metadata**: Metadata source.
-- **type**: Video player type :
-    - **"jwplayer"**: Uses flash-based jwPlayer, compatible with many video and audio formats, including MP3 audio, MP4 video and RTMP streams.
-    - **"html5"**: Uses the Popcorn.js library to play HTML5 videos. Supported formats : OGG and WebM on Firefox and Chrome, H.264 on Internet Explorer, Safari and Chrome.
-    - **"youtube"**: Uses Popcorn's Youtube plugin.
-    - **"dailymotion"**
-    - **"auto"**: Replaced by *Youtube* or *Dailymotion* for a video hosted on one of these platform, or *jwPlayer* in other cases.
-- **width** and **height** of the video player.
-- **video**: Video URL. Optional: If present, it overrides the video URL defined in the metadata source.
-- Player-specific options, such as **provider** or **streamer** for JwPlayer
-
-Example:
-
-    var playerConfig = {
-        metadata: metadataSource,
-        type: "jwplayer",
-        height: 350,
-        width: 620,
-        provider: "rtmp"
-    };
+In this version, the video player is now a widget. This section is therefore obsolete
 
 ## User Interface Configuration ##
 
-L’interface se configure par un objet GUI, contenant les propriétés suivantes:
+The interface is configured with the following properties:
 
-- **container**: l’ID de l’élément HTML dans lequel le player sera instancié.
-- **width** et **height**: largeur et hauteur de l’interface (*height* est optionnel).
-- **default\_options**: des options de configuration communes à tous les widgets, par exemple, comme ci-dessous, une source de métadonnées communes.
-- **css**: l’URL du fichier CSS de base (LdtPlayer-core.css)
-- **widgets**: la liste des widgets, sous la forme [ { type: *Type du widget*, option_1: *Valeur de l’option 1* } ]. Pour les options des widgets, se référer au document *Architecture générale*
+- **container**: ID of the DOM element in which the metadataplayer will be instantiated.
+- **width** et **height**: width and height of the interface (*height* is optional).
+- **default\_options**: Configuration options that will be passed to all widgets. In the example below, all widgets will connect to the same metadata source.
+- **css**: The URL of the base CSS stylesheet (LdtPlayer-core.css)
+- **widgets**: A list of widgets, in the following format: [ { type: *Widget type*, option_1: *Option 1 value* } ]. For widget options, please refer to the *general architecture* document
 
 Exemple:
 
-    var guiConfig = {
+    var config = {
         container : "Metadataplayer",
         default_options: {
             metadata: metadataSource
@@ -109,6 +88,9 @@
         css : "metadataplayer/css/LdtPlayer-core.css",
         widgets: [
             {
+                type: "AutoPlayer"
+            },
+            {
                 type: "Slider"
             },{
                 type: "Controller",
@@ -123,14 +105,10 @@
         ]
     };
 
-## Instanciation du player ##
+## Player instanciation ##
 
-Le player s’instancie en créant un objet de type **IriSP.Metadataplayer**.
+The metadataplayer is instantiated by creating an object of class **IriSP.Metadataplayer**.
 
 Exemple:
 
-    var config = {
-        player: playerConfig,
-        gui: guiConfig
-    };
-    var monPlayer = new IriSP.Metadataplayer(config);
+    var myPlayer = new IriSP.Metadataplayer(config);
--- a/doc/integration.fr.md	Tue Sep 18 15:39:28 2012 +0900
+++ b/doc/integration.fr.md	Wed Sep 19 14:10:38 2012 +0900
@@ -63,32 +63,11 @@
 
 ## Configuration de la fenêtre vidéo ##
 
-Les options de configuration de la fenêtre vidéo sont:
-
-- **metadata**: La source de métadonnées utilisée, notamment pour obtenir l’URL de la vidéo.
-- **type**: Le type de player vidéo utilisé. Les players disponibles sont :
-    - **"jwplayer"**: Utilise le player flash jwPlayer, compatible avec de nombreux formats vidéo et audio et les flux RTMP.
-    - **"html5"**: Utilise la bibliothèque Popcorn et les vidéos HTML5. Formats supportés: OGG et WebM sur Firefox et Chrome, H.264 sur Internet Explorer et Safari.
-    - **"youtube"**: Utilise le plugin Youtube de Popcorn pour afficher les vidéos Youtube.
-    - **"dailymotion"**
-    - **"auto"**: Remplacé par *Youtube* ou *Dailymotion* pour une vidéo sur l’un de ces sites et par JwPlayer sinon.
-- **width** et **height**: largeur et hauteur de la fenêtre vidéo.
-- **video**: URL de la vidéo. Si ce paramètre est présent, il écrase l’URL chargée dans les métadonnées
-- Paramètres spécifiques à chaque player, qui seront transférés tels quels, par exemple **provider** pour JwPlayer
-
-Exemple:
-
-    var playerConfig = {
-        metadata: metadataSource,
-        type: "jwplayer",
-        height: 350,
-        width: 620,
-        provider: "rtmp"
-    };
+Dans cette version, la fenêtre vidéo est désormais un widget. Cette section est donc obsolète.
 
 ## Configuration de l’interface utilisateur ##
 
-L’interface se configure par un objet GUI, contenant les propriétés suivantes:
+L’interface se configure par un objet contenant les propriétés suivantes:
 
 - **container**: l’ID de l’élément HTML dans lequel le player sera instancié.
 - **width** et **height**: largeur et hauteur de l’interface (*height* est optionnel).
@@ -98,7 +77,7 @@
 
 Exemple:
 
-    var guiConfig = {
+    var config = {
         container : "Metadataplayer",
         default_options: {
             metadata: metadataSource
@@ -106,6 +85,9 @@
         css : "metadataplayer/css/LdtPlayer-core.css",
         widgets: [
             {
+                type: "AutoPlayer"
+            },
+            {
                 type: "Slider"
             },{
                 type: "Controller",
@@ -122,12 +104,8 @@
 
 ## Instanciation du player ##
 
-Le player s’instancie en créant un objet de type **IriSP.Metadataplayer**.
+Le player s’instancie en créant un objet de classe **IriSP.Metadataplayer**.
 
 Exemple:
 
-    var config = {
-        player: playerConfig,
-        gui: guiConfig
-    };
     var monPlayer = new IriSP.Metadataplayer(config);
--- a/doc/widget-api.fr.md	Tue Sep 18 15:39:28 2012 +0900
+++ b/doc/widget-api.fr.md	Wed Sep 19 14:10:38 2012 +0900
@@ -68,15 +68,15 @@
 
 ### Propriétés accessibles par le widget ###
 
-#### Popcorn ####
+#### Media ####
 
-Les fonctions de gestion de la lecture vidéo sont accessibles par la propriété **popcorn** du Metadataplayer.
+Les fonctions de gestion de la lecture vidéo sont accessibles via les objets **media**.
 
 Par exemple:
 
-    this.player.popcorn.trigger("Evenement"); => déclenche un événement Popcorn de type "Evenement"
-    this.player.popcorn.play();               => met le player en lecture
-    this.player.popcorn.currentTime()         => obtient le timecode courant, en secondes
+    this.media.trigger("Evenement"); => déclenche un événement Popcorn de type "Evenement"
+    this.media.play();               => met le player en lecture
+    this.media.currentTime()         => obtient le timecode courant, en secondes
 
 #### Source de métadonnées ####
 
@@ -119,13 +119,20 @@
 
     this.$.click(this.functionWrapper("onClick"));  => Appellera this.onClick() lors d’un click sur le widget
 
-#### bindPopcorn ####
+#### onMediaEvent ####
 
-Attache un événement *Popcorn* à une fonction, sur le même mode que *functionWrapper*
+Attache un événement *Media* ("play", "timeupdate", ...) à une fonction désignée
+- par son nom, quand celle-ci est une méthode du widget, ce qui permet de l’associer directement au widget, sur le même mode que *functionWrapper*
+- comme fonction anonyme
 
 Par exemple:
 
-    this.bindPopcorn("timeupdate","onTimeupdate");  => Appellera this.onTimeupdate() lorsque l’événement Popcorn "timeupdate" est déclenché.
+    this.onMediaEvent("timeupdate","onTimeupdate");                => Appellera this.onTimeupdate() lorsque l’événement media "timeupdate" est déclenché.
+    this.onMediaEvent("play", function() { console.log("play") }); => Affichera "play" dans la console JavaScript
+
+#### onMdpEvent ####
+
+Attache un événement Metadataplayer global ("Annotation.show", "search.found", ...) à une fonction. Utilisé de manière similaire à onMediaEvent.
 
 #### Autres fonctions ####
 
--- a/src/js/defaults.js	Tue Sep 18 15:39:28 2012 +0900
+++ b/src/js/defaults.js	Wed Sep 19 14:10:38 2012 +0900
@@ -69,7 +69,7 @@
         noCss: true,
         requires: [ "tracemanager" ]
     },
-    SlideShare: {
+    Slideshare: {
         requires: [ "swfObject" ]
     },
     Social: {
--- a/src/widgets/Controller.js	Tue Sep 18 15:39:28 2012 +0900
+++ b/src/widgets/Controller.js	Wed Sep 19 14:10:38 2012 +0900
@@ -156,7 +156,7 @@
             _this.player.trigger("Player.MouseOut");
         });
     
-    this.timeDisplayUpdater(0);
+    this.timeDisplayUpdater(new IriSP.Model.Time(0));
     /* some players - including jwplayer - save the state of the mute button between sessions */
    //TODO: MOVE TO THE PLAYER/
     window.setTimeout(this.functionWrapper("volumeUpdater"), 1000);
@@ -168,7 +168,6 @@
   
     // we get it at each call because it may change.
     var _totalTime = this.media.duration;
-        
     this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_time.toString());
     this.$.find(".Ldt-Ctrl-Time-Total").html(_totalTime.toString());
 };
--- a/src/widgets/Slider.js	Tue Sep 18 15:39:28 2012 +0900
+++ b/src/widgets/Slider.js	Wed Sep 19 14:10:38 2012 +0900
@@ -38,8 +38,8 @@
     this.$handle = this.$slider.find('.ui-slider-handle');
     
     this.onMediaEvent("timeupdate","onTimeupdate");
-    this.onMdpEvent("PlayerWidget.MouseOver","onMouseover");
-    this.onMdpEvent("PlayerWidget.MouseOut","onMouseout");
+    this.onMdpEvent("Player.MouseOver","onMouseover");
+    this.onMdpEvent("Player.MouseOut","onMouseout");
     
     if (this.minimize_timeout) {
         this.$slider.css(this.calculateSliderCss(this.minimized_height));
--- a/src/widgets/Trace.js	Tue Sep 18 15:39:28 2012 +0900
+++ b/src/widgets/Trace.js	Wed Sep 19 14:10:38 2012 +0900
@@ -141,10 +141,10 @@
             delete _arg.widget;
             delete _arg.type;
         break;
-        case 'timeupdate':
         case 'play':
         case 'pause':
-            _arg.time = this.player.getCurrentTime().milliseconds;
+            _arg.milliseconds = this.media.getCurrentTime().milliseconds;
+        case 'timeupdate':
         case 'seeked':
         case 'volumechange':
             _traceName += 'media_' + _listener;
--- a/test/audiomp3.htm	Tue Sep 18 15:39:28 2012 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,64 +0,0 @@
-<!doctype html>
-<html>
-
-    <head>
-        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-        <title>Metadataplayer test with HTML5 / MP3 Audio</title>
-        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
-        <link href='test.css' rel='stylesheet' type='text/css'>
-        <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
-        <script type="text/javascript" src="test-config.js" type="text/javascript"></script>
-    </head>
-
-    <body>
-        <h1>Metadataplayer test with HTML5 / MP3 Audio (NOT SUPPORTED BY CHROME &amp; FIREFOX)</h1>
-        <div id="LdtPlayer"></div>
-        <div id="AnnotationsListContainer"></div>
-        <script type="text/javascript">
-    IriSP.jwplayer_swf_path = "player.swf";
-    IriSP.libFiles.defaultDir = "libs/";
-    IriSP.widgetsDir = "metadataplayer";
-    var _metadata = {
-        url: 'json/ldt-ogv.json',
-        format: 'ldt'
-    };
-    var _config = {            
-        gui: {
-            width : 620,
-            container : 'LdtPlayer',
-            default_options: {
-                metadata: _metadata
-            },
-            css : 'metadataplayer/LdtPlayer-core.css',
-            widgets: [
-                { type: "Sparkline" },
-                { type: "Slider" },
-                { type: "Controller" },
-                { type: "Polemic" },
-                { type: "Segments" },
-                { type: "Slice" },
-                { type: "Arrow" },
-                { type: "Annotation" },
-                { type: "Tweet" },
-                {
-                    type: "Tagcloud",
-                    segment_annotation_type: "chap"
-                },
-                {
-                    type: "AnnotationsList",
-                    container: "AnnotationsListContainer"
-                }
-            ]
-        },
-        player:{
-            type:'html5-audio',
-            video: 'wari_0710.mp3',
-            live: true, 
-            height: 1, 
-            width: 1,
-        }
-    };
-    var _myPlayer = new IriSP.Metadataplayer(_config, _metadata);
-        </script>
-    </body>
-</html>
--- a/test/ext-trace.htm	Tue Sep 18 15:39:28 2012 +0900
+++ b/test/ext-trace.htm	Wed Sep 19 14:10:38 2012 +0900
@@ -9,7 +9,6 @@
         <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
         <script type="text/javascript" src="libs/jquery.min.js"></script>
         <script type="text/javascript" src="libs/tracemanager.js" type="text/javascript"></script>
-        <script type="text/javascript" src="test-config.js" type="text/javascript"></script>
     </head>
 
     <body>
@@ -17,78 +16,74 @@
         <div id="LdtPlayer"></div>
         <div id="AnnotationsListContainer"></div>
         <script type="text/javascript">
-    IriSP.libFiles.locations.jwPlayerSWF = "player.swf";
-    IriSP.libFiles.defaultDir = "libs/";
-    IriSP.language = 'fr';
-    IriSP.widgetsDir = "metadataplayer";
-    var _tracer = tracemanager.init_trace("test", {
-            url: "http://traces.advene.org:5000/",
-            requestmode: "GET",
-            syncmode: "sync",
-            default_subject: "tests-Metadataplayer"
-        });
-    _tracer.trace("CallFromOutside");
-    var _metadata = {
-        url: 'json/ldt-jwplayer.json',
-        format: 'ldt'
-    };
-    var _config = {            
-        gui: {
-            width : 550,
-            container : 'LdtPlayer',
-            default_options: {
-                metadata: _metadata
-            },
-            css : 'metadataplayer/LdtPlayer-core.css',
-            widgets: [
-                { type: "Slider" },
-                { type: "Controller" },
-                { type: "Polemic" },
-                { type: "Segments" },
-                { type: "Slice" },
-                {
-                    type: "Arrow",
-                    base_height: 4
-                },
-                { type: "Annotation" },
-                {
-                    type: "CreateAnnotation",
-                    api_endpoint_template: "http://capsicum/pf/ldtplatform/api/ldt/annotations/{{id}}.json",
-                    creator_name: "Metadataplayer",
-                    creator_avatar: "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png",
-                    tag_titles: ["#amateur", "#digital-humanities"]
-                },
-                { type: "Tweet" },
-                {
-                    type: "Tagcloud"
-                },
-                {
-                    type: "AnnotationsList",
-                    container: "AnnotationsListContainer",
-                    default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png"
-                },
-                {
-                    type: "Trace",
-                    tracer: _tracer,
-                    js_console: true,
-                    extend: {
-                        test: 42
-                    }
-                }
-            ]
-        },
-        player:{
-            type:'auto',
+IriSP.libFiles.defaultDir = "libs/";
+IriSP.language = 'fr';
+IriSP.widgetsDir = "metadataplayer";
+var _tracer = tracemanager.init_trace("test", {
+        url: "http://traces.advene.org:5000/",
+        requestmode: "GET",
+        syncmode: "sync",
+        default_subject: "tests-Metadataplayer"
+    });
+_tracer.trace("CallFromOutside");
+var _metadata = {
+    url: 'json/ldt-ogv.json',
+    format: 'ldt'
+};
+var _config = {
+    width : 550,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : 'metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        {
+            type: "AutoPlayer",
             live: true, 
             height: 350, 
             width: 550, 
             provider: "rtmp",
-            autostart: true,
-            metadata: _metadata
+            autostart: true
+        },
+        { type: "Slider" },
+        { type: "Controller" },
+        { type: "Polemic" },
+        { type: "Segments" },
+        { type: "Slice" },
+        {
+            type: "Arrow",
+            base_height: 4
+        },
+        { type: "Annotation" },
+        {
+            type: "CreateAnnotation",
+            api_endpoint_template: "http://capsicum/pf/ldtplatform/api/ldt/annotations/{{id}}.json",
+            creator_name: "Metadataplayer",
+            creator_avatar: "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png",
+            tag_titles: ["#amateur", "#digital-humanities"]
+        },
+        { type: "Tweet" },
+        {
+            type: "Tagcloud"
+        },
+        {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer",
+            default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png"
+        },
+        {
+            type: "Trace",
+            tracer: _tracer,
+            js_console: true,
+            extend: {
+                test: 42
+            }
         }
-    };
-    
-    var _myPlayer = new IriSP.Metadataplayer(_config);
+    ]
+};
+
+var _myPlayer = new IriSP.Metadataplayer(_config);
     
         </script>
     </body>
--- a/test/jwplayer.htm	Tue Sep 18 15:39:28 2012 +0900
+++ b/test/jwplayer.htm	Wed Sep 19 14:10:38 2012 +0900
@@ -36,6 +36,7 @@
                 live: true,
                 width: 550, 
                 provider: "rtmp",
+                autostart: true,
                 streamer: function(_url) {
                     var _matches = _url.match(/^[^\/]+\/\/[^\/]+\/[^\/]+\//);
                     if (_matches) {
@@ -43,8 +44,7 @@
                     } else {
                         return _url;
                     }
-                },
-                metadata: _metadata
+                }
             },
             { type: "Slider" },
             { type: "Controller" },
--- a/test/mp4video.htm	Tue Sep 18 15:39:28 2012 +0900
+++ b/test/mp4video.htm	Wed Sep 19 14:10:38 2012 +0900
@@ -7,7 +7,6 @@
         <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
         <link href='test.css' rel='stylesheet' type='text/css'>
         <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
-        <script type="text/javascript" src="test-config.js" type="text/javascript"></script>
     </head>
 
     <body>
@@ -15,7 +14,43 @@
         <div id="LdtPlayer"></div>
         <div id="AnnotationsListContainer"></div>
         <script type="text/javascript">
-            testConfig('json/ldt-ogv.json', true, "trailer.mp4", "html5");
+IriSP.libFiles.defaultDir = "libs/";
+IriSP.widgetsDir = "metadataplayer";
+var _metadata = {
+    url: "json/ldt-ogv.json",
+    format: 'ldt'
+};
+var _config = {
+    width : 620,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : 'metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        {
+            type: "PopcornPlayer",
+            video: "trailer.mp4"
+        },
+        { type: "Sparkline" },
+        { type: "Slider" },
+        { type: "Controller" },
+        { type: "Polemic" },
+        { type: "Segments" },
+        { type: "Slice" },
+        { type: "Arrow" },
+        { type: "Annotation" },
+        { type: "CreateAnnotation" },
+        { type: "Tweet" },
+        { type: "Tagcloud" },
+        {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer"
+        },
+        { type: "Mediafragment"}
+    ]
+};
+_myPlayer = new IriSP.Metadataplayer(_config);
         </script>
     </body>
 </html>
--- a/test/oggvideo.htm	Tue Sep 18 15:39:28 2012 +0900
+++ b/test/oggvideo.htm	Wed Sep 19 14:10:38 2012 +0900
@@ -7,7 +7,6 @@
         <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
         <link href='test.css' rel='stylesheet' type='text/css'>
         <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
-        <script type="text/javascript" src="test-config.js" type="text/javascript"></script>
     </head>
 
     <body>
--- a/test/renkan.htm	Tue Sep 18 15:39:28 2012 +0900
+++ b/test/renkan.htm	Wed Sep 19 14:10:38 2012 +0900
@@ -28,44 +28,24 @@
             <div id="RenkanContainer"></div>
         </div>
         <script type="text/javascript">
-    IriSP.libFiles.defaultDir = "libs/";
-    IriSP.language = 'fr';
-    IriSP.widgetsDir = "metadataplayer";
-    var _metadata = {
+IriSP.libFiles.defaultDir = "libs/";
+IriSP.language = 'fr';
+IriSP.widgetsDir = "metadataplayer";
+var _metadata = {
 //        url: 'json/ldt-jwplayer.json',
-        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/67280b1c-ff30-11e0-a82d-00145ea49a02?callback=?',
-        format: 'ldt'
-    };
-    var _config = {
-        gui: {
-            width : 550,
-            container : 'LdtPlayer',
-            default_options: {
-                metadata: _metadata
-            },
-            css : 'metadataplayer/LdtPlayer-core.css',
-            widgets: [
-                { type: "Slider" },
-                { type: "Controller" },
-                { type: "Polemic" },
-                { type: "Segments" },
-                { type: "Slice" },
-                {
-                    type: "Arrow",
-                    base_height: 4
-                },
-                { type: "Annotation" },
-                { type: "Tweet" },
-                {
-                    type: "Renkan",
-                    container: "RenkanContainer",
-                    data: [ "json/renkan.json", "json/renkan-2.json" ]
-                },
-                { type: "Mediafragment"}
-            ]
-        },
-        player:{
-            type:'auto',
+    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/67280b1c-ff30-11e0-a82d-00145ea49a02?callback=?',
+    format: 'ldt'
+};
+var _config = {
+    width : 550,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : 'metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        {
+            type: "JwpPlayer",
             live: true, 
             height: 350, 
             width: 550, 
@@ -77,13 +57,29 @@
                 } else {
                     return _url;
                 }
-            },
-            //autostart: true,
-            metadata: _metadata
-        }
-    };
-    
-    var _myPlayer = new IriSP.Metadataplayer(_config);
+            }
+        },
+        { type: "Slider" },
+        { type: "Controller" },
+        { type: "Polemic" },
+        { type: "Segments" },
+        { type: "Slice" },
+        {
+            type: "Arrow",
+            base_height: 4
+        },
+        { type: "Annotation" },
+        { type: "Tweet" },
+        {
+            type: "Renkan",
+            container: "RenkanContainer",
+            data: [ "json/renkan.json", "json/renkan-2.json" ]
+        },
+        { type: "Mediafragment"}
+    ]
+};
+
+var _myPlayer = new IriSP.Metadataplayer(_config);
     
         </script>
     </body>
--- a/test/slideshare.htm	Tue Sep 18 15:39:28 2012 +0900
+++ b/test/slideshare.htm	Wed Sep 19 14:10:38 2012 +0900
@@ -7,7 +7,6 @@
         <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
         <link href='test.css' rel='stylesheet' type='text/css'>
         <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
-        <script type="text/javascript" src="test-config.js" type="text/javascript"></script>
         <style type="text/css">
         #SlideShareContainer {
             float: left;
@@ -23,60 +22,63 @@
         <div id="SlideShareContainer"></div>
         <div id="AnnotationsListContainer"></div>
         <script type="text/javascript">
-    IriSP.libFiles.locations.jwPlayerSWF = "player.swf";
-    IriSP.libFiles.defaultDir = "libs/";
-    IriSP.language = 'fr';
-    IriSP.widgetsDir = "metadataplayer";
-    var _metadata = {
-        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/8a1a344a-7f34-11e1-9ee2-00145ea4a2be?callback=?',
-        format: 'ldt'
-    };
-    var _config = {            
-        gui: {
-            width : 620,
-            container : 'LdtPlayer',
-            default_options: {
-                metadata: _metadata
-            },
-            css : 'metadataplayer/LdtPlayer-core.css',
-            widgets: [
-                { type: "Slider" },
-                { type: "Controller" },
-                { type: "Polemic" },
-                { type: "Segments" },
-                { type: "Slice" },
-                { type: "Arrow" },
-                { type: "Annotation" },
-                {
-                    type: "CreateAnnotation",
-                    api_endpoint_template: "/pf/ldtplatform/api/ldt/annotations/{{id}}.json",
-                    creator_name: "Metadataplayer"
-                },
-                { type: "Tweet" },
-                {
-                    type: "Tagcloud"
-                },
-                {
-                    type: "AnnotationsList",
-                    container: "AnnotationsListContainer"
-                },
-                {
-                    type: "Slideshare",
-                    container: "SlideShareContainer"
-                },
-                { type: "Mediafragment"}
-            ]
-        },
-        player:{
-            type:'auto',
-            live: true, 
-            height: 350, 
-            width: 620, 
+IriSP.libFiles.defaultDir = "libs/";
+IriSP.language = 'fr';
+IriSP.widgetsDir = "metadataplayer";
+var _metadata = {
+    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/8a1a344a-7f34-11e1-9ee2-00145ea4a2be?callback=?',
+    format: 'ldt'
+};
+var _config = {
+    width : 620,
+    container : 'LdtPlayer',
+    default_options: {
+        metadata: _metadata
+    },
+    css : 'metadataplayer/LdtPlayer-core.css',
+    widgets: [
+        {
+            type: "JwpPlayer",
+            live: true,
+            height: 350,
             provider: "rtmp",
             autostart: true,
-            metadata: _metadata
-        }
-    };
+            streamer: function(_url) {
+                var _matches = _url.match(/^[^\/]+\/\/[^\/]+\/[^\/]+\//);
+                if (_matches) {
+                    return _matches[0];
+                } else {
+                    return _url;
+                }
+            }
+        },
+        { type: "Slider" },
+        { type: "Controller" },
+        { type: "Polemic" },
+        { type: "Segments" },
+        { type: "Slice" },
+        { type: "Arrow" },
+        { type: "Annotation" },
+        {
+            type: "CreateAnnotation",
+            api_endpoint_template: "/pf/ldtplatform/api/ldt/annotations/{{id}}.json",
+            creator_name: "Metadataplayer"
+        },
+        { type: "Tweet" },
+        {
+            type: "Tagcloud"
+        },
+        {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer"
+        },
+        {
+            type: "Slideshare",
+            container: "SlideShareContainer"
+        },
+        { type: "Mediafragment"}
+    ]
+};
     
     var _myPlayer = new IriSP.Metadataplayer(_config);
     
--- a/test/vimeo.htm	Tue Sep 18 15:39:28 2012 +0900
+++ b/test/vimeo.htm	Wed Sep 19 14:10:38 2012 +0900
@@ -7,7 +7,6 @@
         <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
         <link href='test.css' rel='stylesheet' type='text/css'>
         <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
-        <script type="text/javascript" src="test-config.js" type="text/javascript"></script>
     </head>
 
     <body>