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 :

Je viens de découvrir qu'un Playmobil avait inscrit mon blog à un concours, à l'insu de mon plein gré

A ce que j'ai compris, il y a plus de 300 blogs d'inscrits. J'ai passé l'étape de la préselection mais tel que c'est parti, je ne passerais pas l'étape suivante.

Si vous voulez voter pour moi ou contre moi, je suis dans le premier groupe...

C'est assez difficile de voter en fait car c'est plein de blogs pas connu.

J'en ai quand même repéré deux :

Daria est dans le groupe 3

Les playmobils sont dans le groupe 12

Amusez-vous bien

Si si

Descendez tout en bas du blog, au niveau du footer, vous voyez la ligne qui sépare le footer des billets ?

Quelle est sa couleur au centre ? Quelle est sa couleur au niveau de la sidebare de gauche ?

Vous n'avez pas comme l'impression que cette ligne horizontale passe du gris au blanc ? (ou l'inverse)

Parce qu'elle est de la même couleur du début à la fin, c'est le dégradé de fond de la sidebarre qui donne cet effet !

Un peu à la manière du plugin Auto Scroller pour WordPress, mais sans plugin ni javascript, juste deux lignes d'HTML (des ancres, quoi !), je vous ai rajouté une petite navigation améliorée autour des commentaires en page d'accueil.

Si vous naviguez avec le thème "Com. par enroulement", vous ne verrez aucun changement. Les changements ont lieu pour les deux autres thèmes : "Com. inclus" et "eeePC et iPhone", ceux qui ont les commentaires par défaut en page d'accueil.

Tout à droite, au niveau de "Commentaires et trackbacks" apparait maintenant une discrète flèche vers le bas permettant d'aller à la "Fin des commentaires".

A l'inverse, toujours tout à droite, au niveau de "Rajouter un commentaire" apparait une discrète flèche vers le haut permettant d'aller au "Premier commentaire".

(et bien entendu, uniquement sur les billets ayant des commentaires)

Qu'en pensez-vous ?

Je n'ai pas rajouté toutes les fonctions possibles et imaginables car n'en voyant pas trop l'utilité mais auriez-vous besoin d'autres choses pour naviguer plus confortablement sur mon blog ?

Il y a 42 jours, j'avais migré mon WordPress de test vers la version 2.3.3 sorti la veille.

Quelques temps plus tard, j'avais annoncé à différentes personnes que j'allais porter sous WordPress mon plugin PlayVidZik codé pour DotClear.

Ayant appris que la version 2.5 de WordPress devait avoir des fonctions audio/vidéo, j'ai alors décidé d'attendre un peu pour voir, afin de ne pas réinventer le fil à couper le beurre.

La sortie de WordPress 2.5 a été reporté mais hier a été présenté une release candidate. Je n'ai pas touché à mon blog de test mais j'ai fait une installation de cette RC1 sur un autre hébergement.

(Ne criez pas) Et ben, plus cela va, plus c'est moche, mon dieu...

Et oui, je vais me remettre au travail pour essayer de porter PlayVidZik sous WordPress car cette version ne fait absolument pas ce à quoi je m'attendais.

Savoir si je passerais mon blog de test sous WP2.5 ? Je ne sais pas encore... En tout cas, il est peu probable que je le fasse le lendemain de l'annonce de sa sortie comme la version précédente.

Un des fichiers sur lequel je compte intervenir n'évolue pas entre les deux versions, il faut encore que je regarde comment mon précédent plugin réagit !

Je suis bientôt en vacances, j'espère pouvoir consacrer un peu de temps à ce projet.

Invité par Cost, je m'exécute avec un peu de retard :

• Les chiffres 3 et 9 m'obsèdent : Lorsque je mange des M&M's, j'en prends 9 que je mange 3 par 3. Une entrée de saucisson ? 9 tranches de saucisson avec 3 morceaux de gruyères coupés chacun en 3 et 3 cornichons coupés en 3 pour faire 9 ! ...

• Au réveil, avant de sortir de ma chambre, j'ai constaté que machinalement, j'exécutait toujours certaines actions dans le même ordre : après avoir allumé la lampe de chevet, j'allume le plafonnier mais j'ouvre toujours la porte avant d'éteindre la lampe de chevet. Il n'y a aucune raison logique d'ouvrir la porte avant d'éteindre la lampe et pourtant, je le fais toujours dans cette ordre.

• Je suis un maniaque dans mon travail et lorsque je prends mon poste, je ne peux pas m'empêcher de réorganiser certaines paillasses. Bon, comme je bosse tout seul, c'est pas grave mais qu'est-ce que je peste. Je ne comprends pas comment ils peuvent bosser de jour dans ce bordel ! Ils peuvent pas être efficace, il y a plein de trucs, on diraient que c'est exprès pour perdre du temps !

• J'ai longtemps été obsédé par les statistiques de mon blog, je regardais tout les jours en détails tous les visiteurs, la provenance, les pages vues, les référents... et je me suis calmé quand il y a eu plus de 1000 entrées par jour. Depuis, j'ai baissé d'un cran mais je constate que je continue tout de même à regarder qui passe (via MyBlogLog / Blogasty / Who's Hot), quels sont mes référents, combien de visiteurs par jour et quel est mon classement sur Toutlemondeenblogue.

• Je me lave les dents au minimum trois fois par jour, souvent quatre fois et j'ai toujours sur moi des chwing-gum pour abaisser le ph et des Oral-B Brush Aways pour donner un petit coup si je ne suis pas chez moi et que je ne peux pas me brosser les dents.

• Je ne peux pas m'empêcher de proposer mon aide quand je vois que quelqu'un en a besoin et que j'ai les compétences pour. Il faut que je me fasse violence pour me retenir avec certaines personnes mais des fois je n'y arrive pas et je tombe dans le piège.

S'il y a des personnes qui n'ont pas encore participé, ne vous gênez pas pour rattraper la patate chaude.

A la recherche des différents système de vidéos existants, je suis tombé sur le cul avec ce qui va suivre...

J'ai donc été faire un tour du côté de Vimeo et sur cette page, vous pourrez voir en HD la vidéo que j'insère ici.

Vous connaissez le principe du playback sur un tube, regardez ce qui va suivre, c'est impressionnant !

Watch as a group of 2nd year Temasek Polytechnic (Singapore) Communication and Media Management students attempt a lip dub of Rihanna's Umbrella in one continuous take!

Filmed in August 2007 in HD.

(J'ai pensé à un moment intégrer les vidéos Vimeo dans PlayVidZik et en fait, pas la peine, c'est un des rares services qui fourni un code valide XHTML )