# HG changeset patch # User veltr # Date 1348031438 -32400 # Node ID 9a278b9e3b05258b6d899b62411ee2de24426d4b # Parent ee11ed1b739e5680af4171b2183a8488f9cdac7c Updated docs and test suite diff -r ee11ed1b739e -r 9a278b9e3b05 doc/eventslist.txt --- 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 diff -r ee11ed1b739e -r 9a278b9e3b05 doc/integration.en.md --- 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); diff -r ee11ed1b739e -r 9a278b9e3b05 doc/integration.fr.md --- 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); diff -r ee11ed1b739e -r 9a278b9e3b05 doc/widget-api.fr.md --- 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 #### diff -r ee11ed1b739e -r 9a278b9e3b05 src/js/defaults.js --- 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: { diff -r ee11ed1b739e -r 9a278b9e3b05 src/widgets/Controller.js --- 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()); }; diff -r ee11ed1b739e -r 9a278b9e3b05 src/widgets/Slider.js --- 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)); diff -r ee11ed1b739e -r 9a278b9e3b05 src/widgets/Trace.js --- 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; diff -r ee11ed1b739e -r 9a278b9e3b05 test/audiomp3.htm --- 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 @@ - - - - - - Metadataplayer test with HTML5 / MP3 Audio - - - - - - - -

Metadataplayer test with HTML5 / MP3 Audio (NOT SUPPORTED BY CHROME & FIREFOX)

-
-
- - - diff -r ee11ed1b739e -r 9a278b9e3b05 test/ext-trace.htm --- 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 @@ - @@ -17,78 +16,74 @@
diff -r ee11ed1b739e -r 9a278b9e3b05 test/jwplayer.htm --- 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" }, diff -r ee11ed1b739e -r 9a278b9e3b05 test/mp4video.htm --- 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 @@ - @@ -15,7 +14,43 @@
diff -r ee11ed1b739e -r 9a278b9e3b05 test/oggvideo.htm --- 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 @@ - diff -r ee11ed1b739e -r 9a278b9e3b05 test/renkan.htm --- 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 @@
diff -r ee11ed1b739e -r 9a278b9e3b05 test/slideshare.htm --- 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 @@ -