# HG changeset patch # User cavaliet # Date 1389092404 -3600 # Node ID 793b3727d433ca87ce67257b7b5f15aedd6bfb76 # Parent 7253d4d06f0d7de941e892f4ab893f36731061e8 update architecture doc in fr and en diff -r 7253d4d06f0d -r 793b3727d433 doc/architecture.en.md --- 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**: diff -r 7253d4d06f0d -r 793b3727d433 doc/architecture.fr.md --- 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**: diff -r 7253d4d06f0d -r 793b3727d433 src/widgets/MashupPlayer.js --- 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,