Identifiants personnels


Moi ... Moi ... et re Moi
« [UBUNTU] Compiler Flvtool2   Informatique  [SPIP] Spip.ici.ous »

[SPIP Plugin] XSPF plugin

vendredi 6 juillet 2007, modifié le 24 juin 2009, par Alexandra, Quentin Drouet, ubu

Le plugin spiff génère des listes de lecture au format XPSF à partir des documents joints aux articles et aux rubriques de SPIP. Ces listes peuvent ensuite être utilisées dans différents lecteurs, pour afficher par exemple un diaporama, un film, ou encore présenter des oeuvres musicales.

UPDATE (29 Mai 2009)

  • La librairie swfobject passe en librairie externe pour pouvoir la mutualiser avec d’autres plugins
  • On update l’ensemble des modèles pour prendre en compte ce changement
  • Légères mises à jour de la documentation

UPDATE (2 février 2009) :

Présentation

Le plugin présenté ici est fonctionnel et stable. Il demeure quelques problèmes de mise en page de la page configuration avec certains navigateurs. Cependant il est toujours en cours de développement et peut par conséquent présenter de variables imperfections. L’ensemble des fonctionnalités n’a pas encore été testé. Nous vous saurions dès lors gré de votre patiente indulgence ainsi que de votre aimable collaboration pendant cette période. Le service après don varie en fonction de l’humeur des auteurs.

Affichage des documents (sons et videos) de l’article 99 grâce à mediaplayer (<mediaplayer99>)

mediaplayer 99

Affichage des documents (images) de l’article 77 grâce à imagerotator (<rotator77>)

rotator 77

XSPF est le format XML de partage des listes de lectures, dites "playlists" par nos amis anglophone et anglophiles. Ces listes sont exploitables par de nombreux lecteurs qui peuvent être aussi bien embarqués dans votre navigateur, notamment ceux de Jeroen Wijering, qu’être des logiciels autonomes tels que VLC. La présente distribution contient les trois lecteurs web de fichiers mp3 proposés sous licence BSD sur http://musicplayer.sourceforge.net/.

Les playlists peuvent être générée à partir de tous les documents, aussi bien ceux attachés aux articles que ceux joints aux rubriques. Les documents peuvent également être appelés individuellement mais pour l’instant seulement par un. Il sera peut-être possible à l’avenir d’énumérer une série de documents. Les boucles sur les documents utilisées dans cette contribution suivent les règles de spip. Par conséquent on peut appeler les documents de telle rubrique, de tel article, de telle brève ou associé à tel mot clé ou à telle donnée de forms&tables, ou alors appeler directement un document particulier. Il n’est en revanche pas possible d’appeler les documents des articles contenu dans la rubrique XX.

Le plugin spiff propose également des modèles qui permettent d’inclure directement des lecteurs dans des articles, des rubriques ou des brèves SPIP à l’aide d’un simple raccourci, ou encore de les inclure dans des squelettes de manière permanente.

Il est livré avec des pages détaillées pour la configurations fine de nombreux lecteurs (actuellement six) [1]. Ces réglages peuvent également être fait "à la main" à chaque insertion de raccourcis.

Ce plugin présente notamment l’intérêt, par rapport à d’autres lecteurs multimédias pour SPIP, d’utiliser la méthode du SWFObject pour l’insertion du flash. Il s’agit d’un petit code Javascript utilisé pour inclure un contenu au format swf dans une page HTML. Le script peut détecter le plug-in Flash dans tous les principaux navigateurs et est conçu pour rendre l’intégration des swf aussi simple que possible. Il est de plus valide, et respectueux des normes actuelles et à venir. Pour plus d’information sur ce script, c’est ici.

Installation

Récupérer l’archive

Zip - 207.3 ko
La dernière version du plugin

Le plugin est disponible sur la zone par svn [2] à l’adresse svn://zone.spip.org/spip-zone/ dans le dossier plugins/dev/xspf/. Ou alors téléchargez l’archive ci-jointe.

Installer le plugin
Installation et activation comme tous les plugins.
Si vous souhaitez utilisez CFG pour la configurations des lecteurs, installez le... comme tous les plugins.
Le plugin CFG est dorénavant nécessaire pour utiliser ce plugin.
Il faut en outre créer à la racine de votre site SPIP un dossier lib, avec des droits en écriture pour le serveur, dans lequel viendront les lecteurs supplémentaires.

SPIP 2.0
si vous disposez du plugin cfg et d’une version récente de la svn une installation automatique vous sera proposée. Autrement il vous faudra placer manuellement vos fichiers dans le dossier lib/ tel qu’indiqué ci-dessous.

SPIP 1.9.2
Il vous faut encore placer vos lecteurs supplémentaires, par exemple ceux de Jeroen Wijering à l’intérieur du dossier lib/.

La version actuelle n’est plus compatible avec SPIP 1.9.2

Fonctionnement

La base sur laquelle repose ce plugin est le squelette xspf générant les listes de lecture xspf.

Cela ouvre deux types d’exploitation de ces listes :

  • Une utilisation se restreignant à la génération de listes xspf pour un usage avec des logiciels supportant ce format, à l’instar de VLC.
  • L’utilisation des modèles SPIP pour tirer parti des potentialités de chaque lecteur (options, formats de fichiers lisibles...) que l’on pourra insérer dans chaque "objet spip" à l’aide des raccourcis tels que :

Nous ne traitons en premier lieu que de la seconde alternative.

Pour que ce plugin soit portable sur toute utilisation, trois possibilités d’utilisation existent :

  • l’utilisation de base avec les réglages prédéfinis par les concepteurs du plugin
  • la configuration fine par le plugin CFG qui permet à chaque tenancier de site d’avoir des lecteurs en respect avec leur propre charte graphique sans modification des modèles eux mêmes...
  • ... sans empêcher pour autant l’utilisation avancée (voir la partie exemples avancés en bas de cette page) au cas par cas en fonction du contexte et des besoins.

Pour couvrir un maximum de cas, la logique suivante a été retenue lorrs de la rédaction des modèles :
La configuration générale, à l’aide du plugin cfg, de chacun des lecteurs qui est prise en compte partout... où ledit lecteur est présent... sauf si l’entrée "à la main" (c-à-d au cas par cas) est présente. Le cas échéant c’est cette dernière qui s’impose.
À défaut de configuration générale, c’est l’entrée des paramètres à la main qui est prise en compte, ou à défaut de celle-ci les préréglages des lecteurs.

Actuellement des modèles sont proposés pour les lecteurs Web suivants :

Pour connaître le potentiel de chacun de ces lecteurs, l’utilisateur se rapportera avec profit aux pages de documentation sur le site de leur auteur.

Et on teste :

<mediaplayer99> va récupérer la video de l’article 99 à l’aide du modèle mediaplayer.

ATTENTION. Contrairement aux raccourcis SPIP de la distribution officielle le numéro d’identifiant (99 dans l’exemple précédent) appelle les documents d’un article et non pas l’objet portant cet id (img123 ou aut123 ou encore doc123). Pour afficher par exemple le document mp3 portant le numero 123 à l’aide de buttonplayer il faudrait écrire : <buttonplayer1|document=123>

Exemples de mise en oeuvre simple

Dans le champ de rédaction d’un article par exemple, introduisez des raccourcis sur les modèles suivants :

ATTENTION après le choix du modele "rotaror", "mediaplayer" ou autre vous DEVEZ mettre un chiffre (n"importe lequel) pour que cela fonctionne)

XSPF gère les documents qui sont associés aux articles, rubriques, mots-clés (si le plugin mots partout est activé) et les données de Forms&tables (si ce plugin est activé).

1. Affiche les images attachées à la rubrique 32 dans le diaporama JW Image Rotator avec un effet de transition en cercles. la largeur du diaporama est de 500 pixels et sa hauteur de 120 pixels. Chauwe image est affichée durant 5 secondes. Un menu de navigation au sein du diaporama est affiché.

2. Consacrera l’ensemble de la surface de l’animation à la "barre de lecture" (haute de 20px) et surtout à la liste de lecture (qui utilisera la hauteur restante, c’est-à-dire 120px). Idéal pour des mp3 sans pochettes, cette config est forcément inadaptée à des vidéos puisque la zone d’affichage du contenu (en l’occurence la vidéo) est à zéro.

width et height donnent la taille de l’animation flash

3. On pourrait utiliser ce code pour afficher le logo d’un album, ou l’affichage d’une vidéo à gauche, et la liste de lecture à droite, à partir des documents de l’article 14.

4. Dans ce dernier exemple on veut une playliste visible, constituée des documents liés au mot-clé [3] dont l’identifant est 6, en dessous d’une vidéo, de pochettes d’album ou de l’equalizer.

Voir les documentations dédiées au modèle "mediaplayer" et "rotator".

Ces exemples sont valables pour l’insertion directe dans le corps d’un article mais il est également possible de les insérer dans un squelette de cette manière : [(#MODELE{mediaplayer}{id_article=14}{width=320}{height=140}{playliste=bottom}{playlistsize=120})] par exemple.

Le squelette générateur de listes XSPF

Exemples poussés d’utilisation Web

(@ venir)

Exemples d’utilisation avec VLC

VLC parmi tant de choses propose de lire des adresses réseau. Il est dès lors possible de proposer aux internautes de votre site des listes de lectures lisible, en dehors du navigateur, dan VLC.
Pour charger la liste des documents multimédias contenu, par exemple, dans l’article 99 de ce site il vous suffit d’entrer l’adresse suivant dans VLC : http://kent1.sklunk.net/spip.php?page=xspf&id_article=99
page=xspf est indispensable, puisqu’il s’agit de l’appel au squelette qui génère les listes XSPF.
id_article=99 permet de charger la liste des documents attachés à l’article numéro 99. Vous pouvez évidemment utiliser en plus d’id_article :

  • id_rubrique=XX : qui sélectionne les documents joints à la rubrique numéro XX
  • id_document=XX : : qui sélectionne le document dont l’id est XX
  • id_breve=XX : qui sélectionne les documents joints à la brève numéro XX
  • id_mot=XX : qui sélectionne les documents associés au mot-clé dont l’id est XX

Vous pouvez ensuite utiliser, en le séparant par le symbole &, le critère de tri par extension de fichier type= :

  • type=mp3 : ne sélectionnera que des fichiers au format mp3
  • type=mp3|flv : sélectionnera des fichiers aux formats mp3 et flv
  • etc.

Reste encore cinq paramètres exploitables directement par appel au générateur de liste xspf :

  • creator : permet d’indiquer, par exemple, le nom de l’auteur s’il est identique pour tous les fichiers de la liste de lecture.
  • prerolllocation : permet d’afficher une vidéo au format flv, avant la lecture de la liste de lecture. Indiquez l’URL d’un fichier .flv en omettant son extension (c-à-d ne pas écrire .flv).
  • prerolllink : permet d’afficher un lien sur la vidéo de préface.
  • postrolllocation : permet d’afficher une vidéo au format flv, après la lecture de la liste de lecture. Indiquez l’URL d’un fichier .flv en omettant son extension (c-à-d ne pas écrire .flv).
  • postrolllink : permet d’afficher un lien sur la vidéo de postface.

Disfonctionnements connus - en cours de correction

Quelques petits bugs d’affichage demeurent encore dans les pages de configuration de l’espace privé avec certains navigateurs. Celà ne perturbe aucunement le fonctionnement du générateur de listes de lecture et des modèles.

  • Problème d’affichage, dans Safari 2, de la palette de couleurs des pages de configuration.
  • Décalage de l’affichage des formulaires de configuration CFG sous IE7. Ce bug est lié à CFG et non pas au plugin XSPF.

Possibles évolutions du développement

Nous aimerions proposer la possibilité :

  • de sélectionner les documents des articles, brèves, etc., par énumération de leur identifiant selon le modèle : id_rubrique=1,2,3,4,28
  • d’utiliser le critère branche et/ou le critère secteur pour sélectionner les documents attachés aux articles d’une ou plusieurs rubriques, ou à plusieurs rubriques et sous-rubriques.
  • de se servir du squelette générateur de liste d’un autre site SPIP dans les modèles de son propre site Révision 14166

Si vous avez d’autres idées ou bien des solutions à proposer parlez-en dans le forum de cette page.

Pour les curieux motivés, voici deux, trois liens vers des lecteurs qui pourraient être intéressant mais qui restent à adapter pour SPIP.

  • La gallerie dewslider par le développeur du célèbre dewplayer
  • Le lecteur flv et mp3 Xspf Jukebox par lacymorrow. Tout à fait hallucinant de souplesse (skinable). Propose en outre un script getid3 pour aller chercher les infos dans les metas tags mp3. Un modèle est désormais proposé pour ce lecteur, mais il resterait encore à intégrer le script getid3.
  • Une gallerie par lacymorrow

Auteurs, licences et crédits

Les modèles SPIP ont été mis au point sur irc à l’initiative d’alexandra avec la participation de toggg, cy_altern, marcimat, renato et kent1. Ubu les a repris et complétés. Les pages de configuration ont été réalisées par ubu et kent1.

Les lecteurs musicplayer inclus dans cette distribution sont sous licence BSD.

Ce plugin utilise pour son fonctionnement les travaux suivants :

Liens connexes :

Liens externes :

Notes

[1] Nécessite l’installation du plugin CFG de toggg.

[2] Kesako svn ? Au moins un début de réponse par ici et par .

[3] Nécessite l’installation du plugin Des mots clés partout.

Documents joints

Répondre à cet article


commentaires fermes
  • [SPIP Plugin] XSPF plugin 5 décembre 2008 09:14, par gaelson

    HI, J’ai essayé le tuto pour insérer le lecteur de JW mais rien ne s’affiche. j’ai essayé de l’intégré dans une squelette en utilisant le modele mediaplayer. Dans la nouvelle distribution il n’y a pas de lecteur mediaplayer.swf mais par contre player.swf. Dans le tuto il est parlé du squelette xspf. Comment l’utiliser et où se trouve t-il ? quelle balise dois-je mettre dans ma squelette ? en essayant avec le lecteur classique qui se trouve dans la contrib spip, le lecteur s’affiche mais n’arriv pas à lire le fichier flv. A quoi cela peut etre du ?

  • [SPIP Plugin] XSPF plugin 25 novembre 2008 23:16

    Bon là j’y comprend rien
    [(#MODELEslimplayerid_article=#ENVid_article)]
    ça m’affiche dans n’importe quel article les mp3 de tous les articles.
    Alors que je veux les mp3 de l’article en cours

  • [SPIP Plugin] XSPF plugin 22 novembre 2008 19:02, par tontonraoul

    Bonjour Kent1,
    bon, je me doute que vous ne passez pas votre temps à faire le SAV du plugin spiff, mais là j’aurais bien besoin d’un peu d’aide...

    J’ai installé le plugin [1], avec l’idée d’en faire un usage basique (modèles) au vu de mes maigres compétences en SPIP. Mais voilà que je bute sur un problème déjà signalé dans les messages précédents :
    au lieu de l’affichage du mediaplayer ou du rotator, j’ai le message « Get the Flash Player ».
    En regardant un peu le code source de la page générée je vois ce passage qui m’intrigue :

    <script type="text/javascript">
    // <![CDATA[
            var s_32_32 = new SWFObject("","rotator","400","260","7");

    Le SWFObject("" ne pointe-t-il pas dans le vide, là où on devrait avoir le chemin vers le fichier lib/imagerotator-3-16/imagerotator-3-16/imagerotator.swf ?
    Cela vous inspire-t-il quelque chose quant à la source de mon erreur ?

    Merci par avance,
    Tontonraoul

  • Installation XSPF plugin 22 novembre 2008 17:38, par Arno

    Bonjour,

    Je souhaite utiliser ce plugin (surtout pour JW Image Rotator), mais j’ai dû mal à l’installer. Voici ma démarche :
    - copié-collé plugin vers mon repertoire plugin + activation
    - création répertoire /lib à la racine, avec dézippage de TOUS les fichiers dans le répertoire /lib/imagerotator-3-16/imagerotator-3-16/
    - création d’un article contenant des jpeg (article=11)
    - insertion ligne de code dans squelette :

    [(#MODELE{rotator}{article=10}{transition=fade}{width=450px}{height=200px}{rotatetime=5})]

    Résultat : rien ne s’affiche mais je peux trouver cette erreur dans mon code :

    <noscript><p>D&#233;sol&#233;, mais le javascript est n&#233;ecessaire dans la version actuelle. Merci de le r&#233;activer pour afficher le contenu multimedia </p></noscript>
    <!-- alternative texte pour ceux qui ont le js desactive -->

    Je pense à un problème au niveau du copié-collé des fichiers à extraire dans le /lib !!? Mais aussi, un problème dû l’activation du javascript (qui est pourtant bien activé sur mon navigateur Firefox).

    Merci pour votre aide.
    Arno

    Voir en ligne : Site en construction - Ferronnerie Art Forge

  • ajout autre galleries et scripts 12 novembre 2008 00:06, par Rémi

    Bonjoir

    merci pour ce plugin bien complet pour ses applications multimédia ( son, vidéo, images)regroupées

    connais tu les galleries Dhteumeuleu
    http://www.dhteumeuleu.com/
    http://www.dhteumeuleu.com/run/zoom-F/
    http://www.dhteumeuleu.com/run/gal3D-F2/
    http://www.dhteumeuleu.com/run/VML-VG-X/
    http://www.dhteumeuleu.com/run/Slid...
    http://www.dhteumeuleu.com/run/gall...

    NB elles sont intégrées au plugin parmSpip :
    http://oramos.free.fr/paramSPIP/spi...

    certaines pourraient etre sympa comme fonctions supplémentaires pour XSPF ?

    mais je suis une bille en intégration ou plugin pour Spip... si ça dis à quelqu’un qui passe par ce forum

    @+ Rémi

  • [SPIP Plugin] Liens 10 novembre 2008 14:59, par dd

    Bonjour,

    Je n’arrive toujours pas à établir des liens depuis les images qui défilent avec imagerotator. J’ai essayé plusieurs solutions dont celle-ci qui me semble la plus éprouvée :

                    <a href="#URL_ARTICLE">
    [(#MODELE{rotator}{article=1745}{wmode=transparent}{transition=slowfade}{width=200px}{height=150px}{rotate=3} {shuffle=true}{shownavigation=false})]</a>

    sans succès

    J’ai aussi essayé d’ajouter des trucs du genre : {url=#URL_ARTICLE}

    mais là ça fait disparaître les images.

    merci
    dd

  • Problème avec spip 2.0 4 novembre 2008 19:38, par Dan

    Je test le plugin pour une utilisation avec Spip 2.0.
    J’ai mis en place rotator et j’ai le beau message "Get the Flash Player to see this player".
    Avez-vous rencontré ce problème ?

    On peut voir sur http://www.passionmontres.com sur la colonne de droite

    Merci pour votre aide

    Dan

    • Problème avec spip 2.0 20 novembre 2008 04:52, par ed

      salut, on dirait que t’as trouvé la solution ? pourrais-tu éclairer ma lanterne, j’ai le même problème ! Merci

  • [SPIP Plugin] XSPF plugin 2 novembre 2008 12:34, par PY

    Merci Beaucoup pour ce tuto
    Tout cela à l’air formidable.
    Mais si l’on ne souhaite pas inclure les appels dans le corps d’un article mais dans le squelette lui même, comment fait on ?
    Peut on faire un truc du genre inclure quelque chose en passant ne nuémro de rubrique ou d’article ...
    Une idée ?

    PY

  • [SPIP Plugin] XSPF plugin 2 novembre 2008 03:33, par opopop

    Bonjour,

    Je n’arrive pas à faire apparaître mon lecteur MediaPlayer dans mes articles. Pourtant je l’ai bien placé à la racine du site dans lib/mediaplayer/mediaplayer.swf

    En regardant le code avec Firebug, j’ai ce code :

    <noscript><p>Désolé, mais le javascript est nécecessaire
    dans la version actuelle. Merci de le réactiver pour afficher
    le contenu multimedia </p></noscript>

    <div id="mediaplayer_34_id_article_34" class="player" >
    <embed id="mediaplayer"  name="mediaplayer" src="undefined" type="application/x-shockwave-flash"/>
    </div>

    src="undefined" ,Il ne trouve donc pas le chemin.
    Quelqu’un peut me mettre sur une piste ?

    Voir en ligne : Radio Pixie

  • [SPIP Plugin] XSPF plugin 28 septembre 2008 19:49, par rouges

    Bonjour,

    Le plugin marche super bien, grand merci à vous, mais...
    Je cherche désespérément le moyen d’afficher la liste
    des videos (documents joints à un article), les videos ne
    se suivent qu’en actionnant les boutons suivant et
    précédent de la barre de navigation du lecteur...
    J’ai joué sur les hauteurs et les largeurs mais rien
    n’apparaît... Merci d’avance si vous pouvez m’aider...
    (SPIP 1.9.2e et mediaplayer 4.1)

Propulsé par : SPIP 2.1.26 SVN [21335]