added a tutorial on how to write a plugin.
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/doc/widget_tutorial/LdtPlayer-tutorial.js Fri Feb 17 10:22:39 2012 +0100
@@ -0,0 +1,61 @@
+/* This is the constructor of the widget. It's called by the
+ initialization routine.
+*/
+IriSP.TutorialWidget = function(Popcorn, config, Serializer) {
+ IriSP.Widget.call(this, Popcorn, config, Serializer);
+ /* After having called the parent constructor, a couple objects are defined for us
+ this._config contains all the configuration options passed in the config.
+ this._id holds the id of the div where the widget has to draw himself
+ this._serializer is an object containing the metadata that was request in the configuration
+ options.
+ */
+
+}
+
+/* We need to create assign new prototype to TutorialWidget.prototype
+ because we're going to declare methods in it */
+IriSP.TutorialWidget.prototype = new IriSP.Widget();
+
+/* This method draws the widget - it's called automatically by
+ the initialization script.
+ */
+IriSP.TutorialWidget.prototype.draw = function() {
+ /* this.selector is a shortcut to jQuery(widget.container) - it's used everywhere in the code */
+ this.selector.html('Hello');
+ this.selector.css({
+ "text-align" : "center",
+ "padding": "10px 0",
+ "font-size" : "14px"
+ });
+
+ /* The following is a list of idioms found throughout the code */
+ var templ = IriSP.player_template; /* get the compiled template code for the player.html template -
+ templates are located in the src/templates directory and are automatically
+ compiled and made available in the compiled file as IriSP.templatename_template (without the .html)
+ */
+ var res = IriSP.templToHTML(IriSP.player_template, {var: 1}); /* format the template with the variable 'var' */
+
+ /* this._Popcorn is a handle on the Popcorn object. It exposes the API which is documented
+ here : http://popcornjs.org/api
+ currentTime is a Popcorn method that either returns or changes the currentTime.
+ */
+ var time = this._Popcorn.currentTime();
+
+ /* Listen to the IriSP.TutorialWidget.foo message. By convention, the name of
+ a message is IriSP.widgetName.messageName */
+ this._Popcorn.listen("IriSP.TutorialWidget.foo",
+ /* IriSP.wrap preserves this in the callback */
+ IriSP.wrap(this, this.fooMessageHandler));
+ /* send a message, passing an object allong */
+ this._Popcorn.trigger("IriSP.TutorialWidget.foo", {name: "Dave", surname: "Grohl"});
+};
+
+/* Handler for the IriSP.foo message */
+IriSP.TutorialWidget.prototype.fooMessageHandler = function(param) {
+
+ // show that this is preserved correctly.
+ console.log(this !== window, this);
+
+ this.selector.append(IriSP.templToHTML("<h2>{{ name }}, {{ surname }}</h2>", {name: param.name, surname: param.surname}));
+ return;
+};
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/doc/widget_tutorial/README.txt Fri Feb 17 10:22:39 2012 +0100
@@ -0,0 +1,7 @@
+How to make your own widget for the metadataplayer
+==================================================
+
+This is a short tutorial that will show you how to make
+a widget for the metadataplayer. It details how to configure
+the metadataplayer in a HTML page and how to use your own widget
+along with the player.
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/doc/widget_tutorial/tutorial.htm Fri Feb 17 10:22:39 2012 +0100
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html dir="ltr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
+
+<head>
+<title>Metadataplayer - Widget tutorial</title>
+</head>
+
+<body>
+
+ <div style="width:650px;font-family: 'Trebuchet MS', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';">
+ <h1>MetaDataPlayer</h1>
+ </div>
+
+ If you're seeing nothing, it's because you've probably forgotten to run the build script.
+ Run sbin/build/compil.sh to compile the files together.
+ <!-- load the player file, and then our tutorial widget -->
+ <script type="text/javascript" src="../../build/LdtPlayer-release.js" type="text/javascript"></script>
+ <script type="text/javascript" src="LdtPlayer-tutorial.js" type="text/javascript"></script>
+
+ <!-- this is the div the player will instantiate itself-->
+ <div id="LdtPlayer"></div>
+
+ <script type="text/javascript">
+ var file = "../../test/integration/polemic_fr.json";
+
+ /* This is the player configuration */
+ var config = {
+ /* The first part of the config, config.gui, describes the gui options and the widgets. */
+ gui:{
+ width:650,
+ container:'LdtPlayer', /* container div where the player will instantiate itself */
+ css:'../../src/css/LdtPlayer.css', /* where to get the css from */
+
+ /* default options for the widgets, to keep things DRY.
+ We put the metadata config there because the widgets often get their data from the same sources,
+ Also not that re-defining a field that was defined in default_options overrides its value.
+ */
+ default_options : {
+ metadata:{
+ src:file,
+ type:'json' /* determines how the data will be loaded */
+ }
+ },
+ /* this is the list of the widget that are going to be instantiated
+ We're going for a minimal player here, so we're only going to instantiate
+ a basic gui, a seekbar and our tutorial widget.
+ */
+ widgets: [
+ /* the type of the widget corresponds to the name of its constructor.
+ For instance, type: "SliderWidget" means to instantiate IriSP.SliderWidget
+ */
+ {type: "SliderWidget"},
+ {type: "PlayerWidget"},
+ {type: "TutorialWidget"},
+ ]
+ },
+ /* second part of the config - player options */
+ player:{
+ /* type of the player to instantiate - available values are
+ jwplayer, html5, youtube, etc.
+ */
+ type:'jwplayer',
+ /* the rest are options for the jwplayer */
+ live: true,
+ height: 300,
+ width: 640,
+ provider: "rtmp",
+ file: "video/ldtplatform/museologie_inaugurale_20111018_flat.f4v",
+ streamer: "rtmp://media.iri.centrepompidou.fr/ddc_player/"
+ },
+ /* modules - modules are things similar to widgets, except that they
+ don't live in a div.
+ */
+ modules: [
+ /* the mediafragment module updates the url of the video to allow
+ sharing a specific moment in a video
+ */
+ { type: "MediaFragment",
+ metadata:{
+ format:'cinelab',
+ src:file,
+ type:'json'}
+ }]
+
+ };
+
+ // init the player, specifying the config and a basic config file
+ // for media autoconfig.
+ IriSP.initPlayer(config, file);
+ </script>
+
+
+ </body>
+ </html>