--- a/doc/architecture.en.md Thu Jan 02 16:54:22 2014 +0100
+++ b/doc/architecture.en.md Tue Jan 07 12:00:04 2014 +0100
@@ -119,15 +119,7 @@
### players ###
-Files in this directory interface *Popcorn Replacement* (see *pop.js*) with third-party video players.
-
-Five players are available:
-
-1. **player.jwplayer**, for JwPlayer, used to play RTMP streams on the *Ligne de temps* platform.
-2. **player.dailymotion**, to play videos on Dailymotion.
-3. **player.allocine**, to play videos on allocine.net
-4. **player.mashup**, for the flash based mashup player written by Thibaut Cavalié.
-5. **player.htmlMashup**, for the Popcorn-based HTML5 mashup player.
+Players are now widgets. See widget section for their configuration.
### serializers ###
@@ -144,7 +136,57 @@
Located in the *src/widgets* directory, they’re composed of a mandatory JavaScript file, *WidgetName.js* and an optional stylesheet, *WidgetName.css*
-#### Common Widget Options ####
+### Common video player Widget oOptions ###
+
+- **video**, video file URL.
+- **height**, video player height (width is defined in the main *config* of IriSP.Metadataplayer(*config*) ).
+- **autostart**, as its name implies, *true* or *false*.
+- **url\_transform**, function to transform the video url, if a transformation is needed before integration.
+
+Here is the list of available video player widget with their options. No specific css used.
+
+#### HtmlPlayer ####
+
+- **Role** : pure html5 video player.
+
+#### JwpPlayer ####
+
+- **Role** : interface with JW Player, often useful with rtmp streamed flash urls or mp4 files fallback. Last version delivered : 6.5.3609.
+
+#### PopcornPlayer ####
+
+- **Role** : interface with popcorn player, which enables to read html5, youtube and vimeo videos. Last version delivered : 1.3.
+- **Option**:
+ - **video**: video file URL or youtube/vimeo page, for example http://www.youtube.com/watch?v=Eb7U-umL5L4 or http://vimeo.com/80887929.
+
+#### DailymotionPlayer ####
+
+- **Role** : interface with the dailymotion player.
+- **Option**:
+ - **video**: URL of the dailymotion page, for example http://www.dailymotion.com/video/x16kajy.
+
+#### AdaptivePlayer ####
+
+- **Role** : selects JwpPlayer or HtmlPlayer depending of the url.
+
+#### AutoPlayer ####
+
+- **Role** : select the appropriate player depending of the url among all the available players. For example rtmp leads to JwpPlayer, youtube to PopcornPlayer, webm to HtmlPlayer, etc.
+
+#### PlaceholderPlayer ####
+
+- **Role** : Placeholder, does not read any video.
+
+#### HtmlMashupPlayer ####
+
+- **Role** : Enables to read mashup "bout à bout" of html5 videos.
+
+#### MashupPlayer ####
+
+- **Role** : Enables to read mashup "bout à bout" of html5 videos.
+
+
+### Common Widget Options ###
- **metadata**, metadata source, as an object with the following properties: { url: *URL of the data source*, type: *Serializer type* }
- **container**, used to position the widget in a given HTML element, given its ID. If omitted, the widget will be automatically aligned vertically below the player.
@@ -155,7 +197,7 @@
Here’s a list of available widgets:
-### Annotation ###
+#### Annotation ####
- **Role**: Displays information relative to a single segment/annotation while it is being played
- **Options**:
@@ -178,7 +220,7 @@
- **newest\_first**: (default: false), When *true*, annotations are sorted by decreasing creation date. When *false*, annotations are sorted by increasing timecode.
- Uses a CSS stylesheet: yes
-### Arrow ###
+#### Arrow ####
- **Role**: Draws the position arrow showing where the annotation is.
- **Options**:
@@ -195,7 +237,7 @@
- Uses external library: Raphael
- Uses a CSS stylesheet: no
-### Controller ###
+#### Controller ####
- **Role**: Play, Pause, Search, Annotate buttons and volume control
- **Options**:
@@ -204,7 +246,7 @@
- Uses external library: jQuery UI
- Uses a CSS stylesheet: yes
-### CreateAnnotation ###
+#### CreateAnnotation ####
- **Role**: Displays a form to create a new annotation
- **Options**:
@@ -222,14 +264,14 @@
- **close\_widget\_timeout**: (default: 0), duration in milliseconds before widget is closed after send. If value is set to 0, the widget stays open.
- Uses a CSS stylesheet: yes
-### HelloWorld ###
+#### HelloWorld ####
- **Role**: Example widget demonstration the API capabilities
- **Options**:
- **text**: (default: "world"), text to display after "Hello, "
- Uses a CSS stylesheet: yes
-### Media ###
+#### Media ####
- **Role**: Shows current media, as well as other medias in the project. Mostly used for mashups
- **Options**:
@@ -237,14 +279,14 @@
- **media\_url\_template**: Specifies an URL template for when a media doesn’t include URL information, e.g.: "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/"
- Uses a CSS stylesheet: yes
-### Mediafragment ###
+#### Mediafragment ####
- **Role**: Handles *Media fragments*-compliant URIs (W3C Recommandation): Changing the playing position changes the URL and vice-versa.
- An URL ending with #id=*annotation ID* points to an annotation, one with #t=*time in seconds* to a precise position.
- No options
- Uses a CSS stylesheet: no
-### Polemic ###
+#### Polemic ####
- **Role**: Shows the *polemical timeline*, i.e. tweets colored according to the polemical syntax. Depending on the number of tweets, two visualization modes exist:
- Below the threshold (low volume mode), tweets are represented as individual squares.
@@ -259,13 +301,13 @@
- **polemics**: polemical colors to display, as an array of objects, e.g. [ { name: "OK", keywords: [ "++" ], color: "#1D973D" } ]
- Uses a CSS stylesheet: yes
-### Renkan ###
+#### Renkan ####
- **Role**: Interface with the *Renkan* project.
- Uses external libraries: jQuery Mousewheel, Backbone, Backbone Relational, Renkan-Publish
- Uses a CSS stylesheet: oui
-### Segments ###
+#### Segments ####
- **Role**: Displays segments of a media as rectangles on an horizontal line.
- **Options**:
@@ -273,7 +315,7 @@
- **height**: height of the widget, in pixels
- Uses a CSS stylesheet: yes
-### Slider ###
+#### Slider ####
- **Role**: A combination of a Progress bar and a Slider displaying and allowing repositioning of the current video playback position.
- **Options**:
@@ -283,7 +325,7 @@
- Uses external library: jQuery UI
- Uses a CSS stylesheet: yes
-### Social ###
+#### Social ####
- **Role**: Adds buttons to share an URL on social networks
- **Options**:
@@ -297,7 +339,7 @@
- Uses a CSS stylesheet: yes
- Uses external library: ZeroClipboard
-### Sparkline ###
+#### Sparkline ####
- **Role**: Displays a curve showing the volume of tweets across time.
- **Options**:
@@ -311,7 +353,7 @@
- Uses external library: Raphael
- Uses a CSS stylesheet: no
-### Tagcloud ###
+#### Tagcloud ####
- **Role**: Shows a tag cloud - WARNING: Doesn’t work well with Japanese language because of word splitting issues
- **Options**:
@@ -328,13 +370,13 @@
- **max\_font\_size**: (default: 26), font size for the least frequent word.
- Uses a CSS stylesheet: yes
-### Tooltip ###
+#### Tooltip ####
- **Role**: Displays a tooltip. Is mainly used as a subwidget, embedded and called from another widget.
- No options
- Uses a CSS stylesheet: yes
-### Trace ###
+#### Trace ####
- **Role**: Sends traces to the KTBS server.
- **Options**:
@@ -345,7 +387,7 @@
- Uses external library: ktbs4js tracemanager
- Uses a CSS stylesheet: no
-### Tweet ###
+#### Tweet ####
- **Role**: Show the contents on a tweet when clicked (in Polemic Widget)
- **Options**:
--- a/doc/architecture.fr.md Thu Jan 02 16:54:22 2014 +0100
+++ b/doc/architecture.fr.md Tue Jan 07 12:00:04 2014 +0100
@@ -119,15 +119,7 @@
### players ###
-Les fichiers de ce répertoire permettent d’interfacer le *Popcorn Replacement* (cf. *pop.js*) avec des lecteurs vidéo tiers.
-
-Existent actuellement:
-
-1. **player.jwplayer**, pour communiquer avec JwPlayer, utilisé pour lire des flux RTMP sur la plateforme *Ligne de temps*
-2. **player.dailymotion**, pour lire des vidéos du *Youtube à la française*
-3. **player.allocine**, pour le player de allocine.net
-4. **player.mashup**, pour le player de bout à bout Flash créé par Thibaut Cavalié.
-5. **player.htmlMashup**, pour le lecteur de bout à bout de vidéos HTML5 basé sur Popcorn.
+Les lecteurs vidéos sont maintenant des widgets. Cf la section widgets pour leur configuration.
### serializers ###
@@ -144,7 +136,57 @@
Situés dans le répertoire *src/widgets*, ils contiennent nécessairement un fichier de code *NomDuWidget.js* et, optionnellement un fichier de style *NomDuWidget.css*
-#### Options courantes ####
+### Options courantes des widgets lecteurs vidéo ###
+
+- **video**, URL du fichier vidéo.
+- **height**, hauteur du lecteur vidéo (la largeur est défini dans la *config* générale du IriSP.Metadataplayer(*config*) ).
+- **autostart**, comme son nom l'indique, *true* ou *false*.
+- **url\_transform**, fonction pour traiter l'url s'il y a besoin de la transformer avant de l'intégrer.
+
+Voici la liste des widgets player actuellement disponibles avec leurs options. Aucun player n'utilise de fichier css spécifique.
+
+#### HtmlPlayer ####
+
+- **Rôle** : lecteur pur html 5.
+
+#### JwpPlayer ####
+
+- **Rôle** : interface avec le JW Player, souvent utile pour les url de stream flash en rtmp ou le fallback des fichiers mp4. Dernière version livrée : 6.5.3609.
+
+#### PopcornPlayer ####
+
+- **Rôle** : interface avec le player popcorn, qui permet de lire des vidéos html5, youtube et vimeo. Version de popcorn livrée : 1.3.
+- **Option**:
+ - **video**: URL du fichier vidéo ou de la page youtube/vimeo, par exemple http://www.youtube.com/watch?v=Eb7U-umL5L4 ou http://vimeo.com/80887929.
+
+#### DailymotionPlayer ####
+
+- **Rôle** : interface avec le player dailymotion pour les vidéos issues de ce site.
+- **Option**:
+ - **video**: URL de la page dailymotion, par exemple http://www.dailymotion.com/video/x16kajy.
+
+#### AdaptivePlayer ####
+
+- **Rôle** : sélectionne JwpPlayer ou HtmlPlayer en fonction de l'url.
+
+#### AutoPlayer ####
+
+- **Rôle** : sélectionne le player approprié en fonction de l'url parmi tous les players disponibles. Par exemple rtmp donnera JwpPlayer, youtube donnera PopcornPlayer, webm donnera HtmlPlayer, etc.
+
+#### PlaceholderPlayer ####
+
+- **Rôle** : Placeholder, ne lit aucune vidéo.
+
+#### HtmlMashupPlayer ####
+
+- **Rôle** : Permet de réaliser des bout à bout de vidéos html5.
+
+#### MashupPlayer ####
+
+- **Rôle** : Permet de réaliser des bout à bout de vidéos html5.
+
+
+### Options courantes des autres widgets ###
- **metadata**, source de métadonnées, sous la forme { url: *URL de la source de données*, type: *Type de sérialiseur utilisé* }
- **container**, à utiliser seulement si le widget ne doit pas être aligné en dessous des autres widgets, pour spécifier l’ID de l’élément HTML dans lequel il doit être affiché.
@@ -156,7 +198,8 @@
Voici la liste des widgets actuellement disponibles, avec leurs options:
-### Annotation ###
+
+#### Annotation ####
- **Rôle**: Affiche les informations relatives à une annotation au moment où celle-ci est jouée
- **Options**:
@@ -165,7 +208,7 @@
- **site\_name**: "Lignes de Temps", nom du site à afficher lorsque l’on clique sur les boutons de partage pour réseaux sociaux.
- Utilise un fichier CSS: oui
-### AnnotationsList ###
+#### AnnotationsList ####
- **Rôle**: Affiche une liste d’annotations
- **Options**:
@@ -179,7 +222,7 @@
- **newest\_first**: (défaut: false), *true*: classe les annotations par ordre antéchronologique de création, *false*: classe les annotations par ordre chronologique de leur timecode vidéo.
- Utilise un fichier CSS: oui
-### Arrow ###
+#### Arrow ####
- **Rôle**: Dessine la flèche indiquant la position de l’annotation
- **Options**:
@@ -196,7 +239,7 @@
- Utilise la bibliothèque: Raphael
- Utilise un fichier CSS: non
-### Controller ###
+#### Controller ####
- **Rôle**: Boutons Lecture/Pause, Rechercher, Ouvrir l’annotateur et contrôle du volume
- **Options**:
@@ -205,7 +248,7 @@
- Utilise la bibliothèque: jQuery UI
- Utilise un fichier CSS: oui
-### CreateAnnotation ###
+#### CreateAnnotation ####
- **Rôle**: Permet de créer une annotation en affichant un formulaire
- **Options**:
@@ -222,14 +265,14 @@
- **close\_widget\_timeout**: (défaut: 0), durée en millisecondes avant que le widget ne soit refermé après l’envoi d’une annotation. Si la valeur est 0, le widget ne se referme pas.
- Utilise un fichier CSS: oui
-### HelloWorld ###
+#### HelloWorld ####
- **Rôle**: Widget d’exemple démontrant l’API de création de widgets
- **Options**:
- **text**: (défaut: "world"), texte à afficher après "Hello, "
- Utilise un fichier CSS: oui
-### Media ###
+#### Media ####
- **Rôle**: Affiche le média en cours, ainsi que la liste des autres médias du projet. Utilisé principalement pour les mashups
- **Options**:
@@ -237,14 +280,14 @@
- **media\_url\_template**: spécifie un gabarit d’URL lorsque le média n’a pas d’information d’URL, par exemple: "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/"
- Utilise un fichier CSS: oui
-### Mediafragment ###
+#### Mediafragment ####
- **Rôle**: Gère les URLs à la norme *Mediafragment*: change la position de la tête de lecture en fonction de l’URL et inversement.
- Une URL finissant par #id=*id de l’annotation* pointe sur une annotation, par #t=*temps en secondes* vers un timecode de la vidéo.
- Pas d’options
- Utilise un fichier CSS: non.
-### Polemic ###
+#### Polemic ####
- **Rôle**: Affiche la *timeline polémique*, c’est à dire les tweets colorés en fonction de la syntaxe polémique. Selon le volume de tweets, deux modes de représentation existent:
- Avec un faible volume, les tweets sont des carrés dessinés individuellement.
@@ -259,13 +302,13 @@
- **polemics**: couleurs polémiques à afficher, en fonction d’une recherche de termes, type [ { keywords: [ "++" ], color: "#1D973D" } ]
- Utilise un fichier CSS: oui
-### Renkan ###
+#### Renkan ####
- **Rôle**: Interface avec le projet *Renkan*
- Utilise les bibliothèques: jQuery Mousewheel, Backbone, Backbone Relational, Renkan-Publish
- Utilise un fichier CSS: oui
-### Segments ###
+#### Segments ####
- **Rôle**: Affiche le *chapitrage* du média, en horizontal.
- **Options**:
@@ -273,7 +316,14 @@
- **height**: hauteur du widget
- Utilise un fichier CSS: oui
-### Slider ###
+#### MultiSegments ####
+
+- **Rôle**: Affiche tous les *annotation\_type* du média sous forme de Segment, en horizontal.
+- **Options**:
+ - **visible_by_default**: true ou false, comme son nom l'indique.
+- Utilise un fichier CSS: non
+
+#### Slider ####
- **Rôle**: Barre de progression et *Slider* indiquant la position de la tête de lecture vidéo et permettant de la déplacer.
- **Options**:
@@ -283,7 +333,7 @@
- Utilise la bibliothèque: jQuery UI
- Utilise un fichier CSS: oui
-### Social ###
+#### Social ####
- **Role**: Affiche des boutons pour partager une URL sur les réseaux sociaux
- **Options**:
@@ -297,7 +347,7 @@
- Utilise un fichier CSS: oui.
- Utilise la bibliothèque: ZeroClipboard
-### Sparkline ###
+#### Sparkline ####
- **Rôle**: Affiche une courbe indiquant l’évolution du volume d’annotations au cours du temps.
- **Options**:
@@ -311,7 +361,7 @@
- Utilise la bibliothèque: Raphael
- Utilise un fichier CSS: non
-### Tagcloud ###
+#### Tagcloud ####
- **Rôle**: Affiche un nuage de mots-clés
- **Options**:
@@ -328,13 +378,13 @@
- **max\_font\_size**: (défaut: 26), taille de caractères (en pixels) pour le mot le plus fréquent.
- Utilise un fichier CSS: oui
-### Tooltip ###
+#### Tooltip ####
- **Rôle**: Affiche une infobulle, utilisé uniquement comme *widget inclus* dans d’autres widgets.
- Pas d’options
- Utilise un fichier CSS: oui
-### Trace ###
+#### Trace ####
- **Rôle**: Envoi des traces au serveur KTBS
- **Options**:
@@ -345,7 +395,7 @@
- Utilise la bibliothèque: ktbs4js tracemanager
- Utilise un fichier CSS: non.
-### Tweet ###
+#### Tweet ####
- **Rôle**: Affiche furtivement le contenu d’un tweet
- **Options**:
--- a/src/widgets/MashupPlayer.js Thu Jan 02 16:54:22 2014 +0100
+++ b/src/widgets/MashupPlayer.js Tue Jan 07 12:00:04 2014 +0100
@@ -5,8 +5,6 @@
IriSP.Widgets.MashupPlayer.prototype = new IriSP.Widgets.Widget();
-/* A Popcorn-based player for HTML5 Video, Youtube and Vimeo */
-
IriSP.Widgets.MashupPlayer.prototype.defaults = {
aspect_ratio: 14/9,
split_screen: false,