Billet remanié le 31/03/08 après une journée complète de travail pour refaire le plugin afin de conserver la validité XHTML malgré l'éditeur visuel - Les 5 premiers commentaires de ce billet font référence à la version précédente du plugin (0.7.3b1)

Je viens de terminer le développement/adaptation de PlayVidZik pour WordPress...

C'est un plugin d'insertion de vidéos (Stage6, YouTube, Koreus, Google, DailyMotion) et de playlists (Deezer et Imeem) spécialement prévu pour fonctionner avec WordPress en version 2.5 mais fonctionnant (en mode +/- dégradé) sous les versions >2.0 fonctionnant normalement sur les WordPress de la version 2 à la version 2.5. Personnellement, je ne l'ai testé que sur WP2.0.4en, WP2.3.3fr et WP2.5fr !

Si vous souhaitez essayer ce plugin, je vous invite à le télécharger ici.

Si vous n'avez pas encore migré sous WordPress en version 2.5, je vous invite à le faire le plus rapidement possible car en dehors des différentes nouveautés, il y a enfin une fonctionnalité plus que très intéressante : l'éditeur visuel ne touche plus touche moins au code HTML inséré ! Comme l'éditeur visuel s'amuse encore à toucher au code et casse la validité XHTML, j'ai adapté le plugin pour que le système de filtre de mes anciens plugins s'adapte aux boutons d'insertion.

Si vous utilisez l'un de mes précédents plugins pour WordPress, il faudra les désactiver avant d'activer PlayVidZik MAIS ne touchez pas aux codes dans vos billets, PlayVidZik prend le relais, le code est compatible avec eux.

L'installation est simple : Dézippez le plugin, uploadez le dossier PlayVidZik dans le dossier /wp-content/plugins de votre WordPress.

Ensuite sauvegardez le fichier quicktags.js que vous trouverez dans /wp-includes/js/ de votre WordPress et remplacez le par l'un fourni dans le dossier quicktags-js du plugin.

J'ai patché deux quicktags.js : L'un pour les versions 2.0 à 2.1.3, l'autre pour les versions 2.2 à 2.5. Si votre WordPress n'est pas dans la liste, vous pouvez le patcher manuellement à l'aide du protocole explicatif (situé à la fin du fichier readme.html).

Activez ensuite le plugin PlayVidZik dans votre menu Plugins (qui s'appelle "Extensions" dans WP2.5), sortez de votre interface d'administration (Se déconnecter ou Déconnexion), videz le cache de votre navigateur et c'est tout.

• Sous WordPress (ici un exemple en version 2.5), dans l'interface de saisie de billet, passez en mode HTML pour voir apparaitre deux boutons supplémentaires :

1 - Pv : Bouton pour l'insertion des vidéos
2 - Pz : Bouton pour l'insertion des playlists musicales

Sous WordPress 2.3.3, vous aurez cet aspect, en cliquant sur le bouton "Code" :

Sur les vieilles versions (genre 2.0), le seul moyen d'obtenir la barre "Quicktags" est de désactiver l'éditeur visuel (dans "Utilisateur") alors que l'on passe instantanément de l'une à l'autre en cliquant sur Visuel/Code ou Visuel/HTML sur les versions récentes. C'est une bonne raison supplémentaire de migrer rapidement.

Après avoir cliqué sur le bouton Pv ou Pz, répondez aux questions posées par le plugin en copiant/collant directement l'url des vidéos ou l'embed des playlists musicales.

Pour les codes couleurs, vous pouvez vous aider de ces snapshoots :

• Si vous ne souhaitez pas patcher le fichier quicktags.js, il ne vous reste plus qu'à utiliser le filtre, comme dans les plugins précédents (voir le mode d'emploi intégré) avec des codes du genre [Mdeezer + id + texte alternatif] ou [YT + id + largeur + hauteur + texte alternatif]. Le filtre n'insère pas les vidéos Koreus, les paramétrages sont très réduits et je stoppe son développement.

• Mais pourquoi n'ai-je pas fait une adaptation des codes pour une utilisation des boutons avec un WordPress <2.5 ET l'éditeur visuel ? C'est simple, je suis une grosse feignasse et là, le code est une transcription directe du code de DotClear et est ainsi facilement adaptable. Dès que je fais une modification dans PlayVidZik pour DotClear, je peux faire la même modification dans PlayVidZik pour WordPress alors que sinon, non, il me faudrait de nombreuses heures de travail... et puis, il va bien falloir passer un jour ou l'autre à WordPress 2.5, nanmého Je l'ai fait

J'ai fait très peu de test sous WordPress et n'ai pas lancé de béta-test privé, aussi, je suis intéressé par vos critiques, retours etc... sur cette version 0.7.3b1 0.7.3b2 0.7.3b3 0.7.3b4 ! Je tenterais de répondre à vos questions, si vous en avez...

J'espère qu'il n'y a pas trop de bugs

N.B. : En cas de demande d'aide, précisez-moi impérativement quelle version du plugin vous utilisez et sous quelle version de WordPress vous l'avez installé.

RAJOUTS du 01/04/2008 - Questions / Réponses

• Q: Comment personnaliser les couleurs des players ?

R: Si les choix proposés ne vous conviennent pas, vous pouvez ponctuellement modifier les codes couleurs après insertion (directement dans le code compris entre parenthèse) mais si vous souhaitez faire une personnalisation aux couleurs de votre thème et la retrouver rapidement à chaque fois, je vous propose plutôt de modifier le plugin :

- Pour modifier le player de playlist d'Imeem, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ1 puis la ligne commençant par case "999", adaptez alors le backColor, primaryColor, secondaryColor et le linkColor.

- Pour modifier le player monotitre d'Imeem, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ2 puis la ligne commençant par case "999", adaptez alors le backColor, primaryColor, secondaryColor et le linkColor.

- Pour modifier le player de playlist de Deezer, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ3 puis la ligne commençant par case "999", adaptez alors le colorBackground, colorButtons, textColor1 et le textColor2.

- Pour modifier le player monotitre de Deezer, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ4 puis la ligne commençant par case "999", adaptez alors le colorBackground, colorButtons, textColor1 et le textColor2.

- Pour modifier le player YouTube, ouvrez le fichier quicktags.js, cherchez la ligne commençant par case "999", adaptez alors le color1 et le color2.

Ensuite, lorsque le plugin vous demande la couleur, répondez 999 et vous aurez des players avec les couleurs que vous aurez défini

• Q: Comment personnaliser la présentation des players par CSS (exemple, avec mon thème, les players sont collés au texte qui précède et qui suit) ?

R: Rajouter dans la feuille de style de votre thème (style.css), cette instruction :

.videos-playlists { }

puis inscrivez dedans vos "règles".

Voici un exemple permettant d'obtenir un espace d'1em avant et après le player qui lui est centré dans le billet :

.videos-playlists {
	margin: 1em auto;
	text-align: center;
}

Ensuite, lorsque le plugin vous pose la question de la position, choisissez "1=rien/nothing" (remplacez le chiffre 0 par défaut par le chiffre 1), ce qui indique que le positionnement va s'effectuer par CSS

• Q: Comment faire pour que les players démarrent tout seul (autoplay) ?

R: Alors là, si vous me permettez d'abord une petite remarque, c'est une très mauvaise idée. Ce n'est pas à vous de décidez de démarrer le player mais à vos visiteurs qui sinon risquent de considérer cela comme une nuisance au lieu d'une fonctionnalité ! Si je vous donne comme exemple que je navigue avec 20 à 30 onglets ouverts sur différents blogs tout en écoutant ma propre musique, il suffit qu'un ou deux blogs diffusent en autoplay pour que cela devienne la cacophonie ! Il me faut alors chercher dans les 30 onglets quels sont les perturbateurs de mon univers sonore et de rage, je ferme les onglets fautifs et ne reviendrais plus sur ces blogs là. Tandis que pour les blogs me proposant des playlists musicales, suivant mes envies, je coupe alors ma propre musique et lance ensuite l'écoute des playlists qui me plaisent.

Si vous persistez à vouloir mettre de l'autoplay dans vos playlists musicales, vous pouvez le faire directement dans le code, c'est le dernier paramètre, juste avant le signe "]". Pour les Imeem, remplacez "false" par "true" et pour les Deezer, remplacez "0" par "1".

• Q: Pourquoi encore un plugin de plus ?

R: Parce que je suis plus strict sur certains points !

Exemple 1 : L'excellent Viper's Video Quicktags - C'est un plugin en anglais, j'ai du mal avec l'anglais, et je ne suis pas le seul, loin de là. Le plugin est rempli de javascript et si vos visiteurs ont désactivés le javascript, ils ne verront pas vos vidéos, ce qui n'est pas le cas avec PlayVidZik. Et ce plugin est aussi très dépendant de l'éditeur visuel, que se passe-t-il lorsque WordPress change d'éditeur, mmmh ? Alors que les boutons de PlayVidZik fonctionnant avec quicktags.js, il suffit de patcher ce fichier d'une version à l'autre. Même si WordPress évolue, vous pouvez vous même patcher votre fichier sans attendre que je fasse une mise à jour du plugin.

Exemple 2 : Le très complet WordPress Video Plugin d'Oliver Wunder - C'est mon inspiration au niveau du filtre mais cependant, plusieurs de ses codes ne passent pas la validation XHTML, il n'y a rien de prévu pour les contenus alternatifs, et certains paramétrages sont bien maigres (possibilité de personnaliser les tailles ou les couleurs...). Cependant, je m'arrange pour que mon code reste compatible avec le sien et ne provoque pas d'interférence.

Je ne tiens pas à rivaliser avec des grands noms de WordPress mais répondre correctement à certains besoins : Accessibilité, validité XHTML, personnalisation poussée.

Je ne vais pas chercher à TOUT mettre dans ce plugin, il correspond actuellement à une demande. Je peux le faire évoluer sur demande justifiée. Je réfléchis à intégrer en vidéo les Vimeo et en musique les playlists JIWA. Si vous avez des demandes, expliquez moi pourquoi cela vous arrangerait que je rajoute telle ou telle fonctionnalité, les commentaires sont fait pour cela aussi.

• Q: C'est quoi tous ces code "cabalistiques" ? Il y a des codes d'expliqués dans l'aide du plugin, mais pas tous ? Tu caches des trucs ?

R: Les codes qui sont expliqués proviennent des précédents plugins, il n'y avait pas de boutons d'insertion, il fallait apprendre la syntaxe... J'ai conservé ces codes afin d'assurer la compatibilité avec ce nouveau plugin et que vous n'ayez rien à changer des codes que vous avez déjà dans vos billets. Les autres codes sont générés par les boutons d'insertions et utilise une syntaxe afin que je m'y retrouve entre PlayVidZik pour DotClear et PlayVidZik pour WordPress mais si vous voulez tout savoir (voire écrire vos codes vous même sans cliquer sur les boutons), voici les explications :