UPDATE (2 février 2009) :
- La version actuelle du plugin est uniquement compatible avec SPIP 2.0
- Elle est compatible avec les versions suivantes des players de Jeroen Wijering :
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>)
Affichage des documents (images) de l’article 77 grâce à imagerotator (<rotator77>)
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. Nous vous recommandons particulièrement la section Pourquoi c’est mieux que les autres solutions.
Installation
Récupérer l’archive
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.
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 :
- <imgXXX|left><docXXX><embXXX|autostart=false>
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 :
- Trois lecteurs XSPF Web Music Player (Flash) inclus dans la distribution. Type associé : MP3
- JW Image Rotator (Jeroen Wijering). Types associés : GIF | PNG | JPG
- JW Media Player (Jeroen Wijering). Types associés : MP3 | FLV | SWF | JPG | PNG | GIF
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 :
- <rotator1|rubrique=32|transition=circles|width=500px|height=120px|rotatetime=5|shownavigation=true>
- <musicplayer1|breve=10|width=300|height=140>
- <mediaplayer14|width=320|height=140|playliste=bottom|playlistsize=120>
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".
Le squelette générateur de listes XSPF
- <title>[(#NOM_SITE_SPIP|translitteration)]<BOUCLE_art(ARTICLES){id_article}>[: (#TITRE|supprimer_numero|texte_backend)]</BOUCLE_art><BOUCLE_rub(RUBRIQUES){id_rubrique}>[: (#TITRE|supprimer_numero|texte_backend)]</BOUCLE_rub><BOUCLE_doc(DOCUMENTS){id_document}>[: (#TITRE|supprimer_numero|propre|texte_backend)]</BOUCLE_doc><BOUCLE_SEC(RUBRIQUES){id_rubrique=#ENV{id_secteur}}>[: (#TITRE|supprimer_numero|translitteration)]</BOUCLE_SEC></title>
- <B_rubsecteur>
- <BOUCLE_rubsecteur(RUBRIQUES){id_rubrique=#ENV{id_secteur}}>
- <trackList>
- <BOUCLE_docsrubsecteur(DOCUMENTS){rubriques.id_secteur=#ENV{id_secteur}}{mode=document}{extension==#ENV{type,.}}{par num titre,titre,id_document}>
- <track>
- <location>[(#EXTENSION|match{jpg|png|gif}|?{[(#FICHIER|image_reduire{#CONFIG{xspf/rotrecadre_width,640},#CONFIG{xspf/rotrecadre_height,0}}|extraire_attribut{src}|url_absolue)],[(#URL_DOCUMENT|url_absolue)]})]</location>
- <image>[(#LOGO_DOCUMENT||extraire_attribut{src}|sinon{[(#GET{img_defaut})]}|url_absolue)]</image>
- <annotation>[(#TITRE|supprimer_tags|supprimer_numero|texte_backend)]</annotation>
- <BOUCLE_lien1(DOCUMENTS_LIENS){id_document}{objet IN 'article','rubrique','breve'}{0,1}>
- <info>[(#ID_OBJET|generer_url_entite{#OBJET}|parametre_url{id_document,#ID_DOCUMENT}|url_absolue)]</info>
- </BOUCLE_lien1>
- </track>
- </BOUCLE_docsrubsecteur>
- <BOUCLE_docsartsecteur(DOCUMENTS){articles.id_secteur=#ENV{id_secteur}}{mode=document}{extension==#ENV{type,.}}{par num titre,titre,id_document}>
- <track>
- <location>[(#EXTENSION|match{jpg|png|gif}|?{[(#FICHIER|image_reduire{#CONFIG{xspf/rotrecadre_width,640},#CONFIG{xspf/rotrecadre_height,0}}|extraire_attribut{src}|url_absolue)],[(#URL_DOCUMENT|url_absolue)]})]</location>
- <image>[(#LOGO_DOCUMENT||extraire_attribut{src}|sinon{[(#GET{img_defaut})]}|url_absolue)]</image>
- <annotation>[(#TITRE|supprimer_numero|supprimer_tags|texte_backend)]</annotation>
- <creator>[(#TITRE|supprimer_numero|supprimer_tags|texte_backend)]</creator>
- <BOUCLE_lien2(DOCUMENTS_LIENS){id_document}{objet IN 'article','rubrique','breve'}{0,1}>
- <info>[(#ID_OBJET|generer_url_entite{#OBJET}|parametre_url{id_document,#ID_DOCUMENT}|url_absolue)]</info>
- </BOUCLE_lien2>
- </track>
- </BOUCLE_docsartsecteur>
- </trackList>
- </BOUCLE_rubsecteur>
- </B_rubsecteur>
- <B_docs>
- <trackList>
- [(#REM) -------------------- Pour jw uniquement ----------------]
- [(#ENV{prerolllocation}|!={''}|oui)
- <track>
- <location>#ENV{prerolllocation}.flv</location>
- <info>#ENV{prerolllink}</info>
- <album>preroll</album>
- </track>]
- [(#REM) -------------------- Boucle generale de generation des listes de lecture xspf ----------------]
- <BOUCLE_docs(DOCUMENTS){id_article ?}{id_rubrique ?}{id_document ?}{id_breve ?}{id_mot ?}{id_donnee ?}{mode=document}{extension==#ENV{type,.}}{par num titre,titre,id_document}>
- <track>
- <location>[(#EXTENSION|match{jpg|png|gif}|?{[(#FICHIER|image_reduire{#CONFIG{xspf/rotrecadre_width,640},#CONFIG{xspf/rotrecadre_height,0}}|extraire_attribut{src}|url_absolue)],[(#URL_DOCUMENT|url_absolue)]})]</location>
- [<image>(#LOGO_DOCUMENT||extraire_attribut{src}|match{dist/vignettes}|?{#LOGO_ARTICLE_RUBRIQUE||sinon{#LOGO_BREVE_RUBRIQUE}||sinon{#LOGO_SITE_SPIP},#LOGO_DOCUMENT}|extraire_attribut{src}|url_absolue)</image>]
- <title>[(#TITRE|supprimer_numero|texte_backend|sinon{[(#FICHIER|basename)]}|texte_backend)]</title>
- <annotation>[(#TITRE|supprimer_numero|propre|supprimer_tags|translitteration|sinon{[(#FICHIER|basename)]}|texte_backend)]</annotation>
- <BOUCLE_lien3(DOCUMENTS_LIENS){id_document}{objet IN 'article','rubrique','breve'}{0,1}>
- <info>[(#ID_OBJET|generer_url_entite{#OBJET}|parametre_url{id_document,#ID_DOCUMENT}|url_absolue)]</info>
- </BOUCLE_lien3>
- [(#ENV{creator}|!={''}|oui)<creator>#ENV{creator}</creator>]
- </track>
- </BOUCLE_docs>
- [(#REM) -------------------- Pour jw uniquement ----------------]
- [(#ENV{postrolllocation}|!={''}|oui)
- <track>
- <location>#ENV{postrolllocation}.flv</location>
- <info>#ENV{postrolllink}</info>
- <album>postroll</album>
- </track>]
- </trackList>
- </B_docs>
- <//B_rubsecteur>
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 siteRé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 :
- swfobject.js pour faciliter l’inclusion des contenus Flash. Délivré sous licence MIT.
-
Farbtastic de Steven Wittens pour aider la configuration des couleurs des player de Jeroen Wijering. Délivré sous licence GPL.Le plugin ne fournit plus par défaut cette librairie - jquery.tooltips de Bassistance.de pour l’ergonomie de la configuration. Délivré sous licence MIT/GPL.
