N’ayant à ce jour pas trouvé de plugin pour WordPress permettant l’ajout de vidéos sur mon blog selon mes besoins précis, je me suis lancé dans le codage d’un petit hack qui a finalement répondu à mes attentes. Pour suivre cette manipulation il suffit d’avoir une légère maitrise de PHP, du XHTML ainsi que savoir se servir d’un client FTP.
Je n’utilise pas d’espace de stockage public tels que Youtube ou Dailymotion pour mes vidéos, tout est enregistré sur mon serveur web. J’utilise depuis longtemps le lecteur vidéo JW Player de chez Longtail, il peut être téléchargé gratuitement pour une utilisation non commerciale. Il est écrit en Flash et reconnait la plupart des formats du web (flv, mp4, etc.).
Intégrer une vidéo dans un billet en utilisant ce lecteur est une sinécure, le code HTML est énorme et rébarbatif, d’où l’idée d’utiliser les shortcodes de WordPress pour simplifier à l’extrême. Au final, l’insertion d’une vidéo dans un article se résume ainsi en une simple ligne écrite directement dans le texte du billet.
Ce shortcode « flv » permet au moyen des attributs de spécifier la vidéo, l’image facultative qui sera utilisée en attendant la lecture, la largeur et la hauteur. Il est important de noter que toutes les vidéos et toutes les images d’attente sont stockées dans un répertoire particulier et envoyées sur le serveur au moyen d’un client FTP, donc pas de belle interface dans le tableau de bord, tout est fait à la main. Dans l’exemple qui suit, le répertoire contenant ces fichiers est le répertoire « /bin » .
La première étape consiste à récupérer le lecteur vidéo JW Player depuis le site de l’éditeur. Attention à bien décocher la case « Include Viral, a video sharing plugin » avant de cliquer sur « Download » , sinon tu vas te retrouver avec un lecteur contenant le plugin « Viral » qui est extrêmement lourd, il t’affichera une page très soulante après chaque lecture.
Une fois le téléchargement de l’archive terminé, tu la décompresses où bon te semble. Tu n’auras besoin que de deux fichiers, « swfobject.js » et « player.swf » , tu les envoies dans la racine de ton site web via ton client FTP favori. Si tu as le fichier « player-viral.swf » à la place c’est que tu as téléchargé le lecteur contenant le plugin « Viral » , tu viendras pas te plaindre.
La seconde étape est la mise en place du hack. Tu vas aller ouvrir le fichier « functions.php » qui se trouve dans le répertoire de ton thème WordPress. Normalement le chemin est « /wp-content/themes/ton_theme » . Tu y ajoute le code suivant, bien entendu entre les balises PHP.
Cette fonction PHP sera utilisée par notre futur shortcode. Tu noteras la présence de la ligne permettant d’indiquer le répertoire des fichiers vidéos.
Tu peux modifier « /bin/ » avec le nom de ton répertoire qui contient tes médias. Attention à bien terminer par un slash.
Juste après l’accolade finale de cette fonction, toujours dans le fichier « functions.php » tu ajoutes la ligne suivante qui a pour but la création du shortcode « flv » .
La dernière étape consiste à intégrer le code JavaScript qui permet au lecteur de fonctionner. Tu vas donc aller ouvrir le fichier « header.php » qui se trouve dans le répertoire de ton thème, et tu vas ajouter la ligne suivante à la suite des balises HTML. Attention à l’emplacement, normalement ce code devrait se trouver entre les balises « <head> » et « </head>.
Tu envoies les deux fichiers « functions.php » et « header.php » modifiés sur ton serveur et le tour est joué, tu peux maintenant utiliser le shortcode nommé « flv » pour intégrer facilement des vidéos dans tes billets.
Par exemple, pour jouer le fichier vidéo « mpm.flv » de 320 pixels par 240, avec comme image d’attente « mpm.jpg » .
Ce code affichera le résultat suivant aux visiteurs.
L’attribut « image » est optionnel. Voici le code pour jouer ce même fichier vidéo, mais sans image d’attente.
Une petite astuce pour terminer, si malgré tous mes avertissements tu as téléchargé le lecteur incluant le plugin Viral et que tu as la flemme de télécharger une version sans cette lourdeur supplémentaire, il te suffit d’ajouter ces quelques lignes à la fonction PHP (au milieu de celles qui se ressemblent) pour désactiver cet horrible message de partage en fin de vidéo.
C’est à toi de jouer maintenant. hack, php, shortcode, tutoriel, wordpress
Imprimer le billet
Je n’utilise pas d’espace de stockage public tels que Youtube ou Dailymotion pour mes vidéos, tout est enregistré sur mon serveur web. J’utilise depuis longtemps le lecteur vidéo JW Player de chez Longtail, il peut être téléchargé gratuitement pour une utilisation non commerciale. Il est écrit en Flash et reconnait la plupart des formats du web (flv, mp4, etc.).
Intégrer une vidéo dans un billet en utilisant ce lecteur est une sinécure, le code HTML est énorme et rébarbatif, d’où l’idée d’utiliser les shortcodes de WordPress pour simplifier à l’extrême. Au final, l’insertion d’une vidéo dans un article se résume ainsi en une simple ligne écrite directement dans le texte du billet.
1 | [flv file="mavideo.flv" image="image.jpg" width="300" height="200"] |
Ce shortcode « flv » permet au moyen des attributs de spécifier la vidéo, l’image facultative qui sera utilisée en attendant la lecture, la largeur et la hauteur. Il est important de noter que toutes les vidéos et toutes les images d’attente sont stockées dans un répertoire particulier et envoyées sur le serveur au moyen d’un client FTP, donc pas de belle interface dans le tableau de bord, tout est fait à la main. Dans l’exemple qui suit, le répertoire contenant ces fichiers est le répertoire « /bin » .
La première étape consiste à récupérer le lecteur vidéo JW Player depuis le site de l’éditeur. Attention à bien décocher la case « Include Viral, a video sharing plugin » avant de cliquer sur « Download » , sinon tu vas te retrouver avec un lecteur contenant le plugin « Viral » qui est extrêmement lourd, il t’affichera une page très soulante après chaque lecture.
Une fois le téléchargement de l’archive terminé, tu la décompresses où bon te semble. Tu n’auras besoin que de deux fichiers, « swfobject.js » et « player.swf » , tu les envoies dans la racine de ton site web via ton client FTP favori. Si tu as le fichier « player-viral.swf » à la place c’est que tu as téléchargé le lecteur contenant le plugin « Viral » , tu viendras pas te plaindre.
La seconde étape est la mise en place du hack. Tu vas aller ouvrir le fichier « functions.php » qui se trouve dans le répertoire de ton thème WordPress. Normalement le chemin est « /wp-content/themes/ton_theme » . Tu y ajoute le code suivant, bien entendu entre les balises PHP.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | // Shortcode FLV function // Author : http://www.memepasmal.ch function flv_func($atts) { // Répertoire des vidéos, change-le si tu veux $repmedia = "/bin/"; // L'ID du DIV doit être unique $div = "media" . rand(0,999999); // Extraction des attributs extract(shortcode_atts(array( 'file' => '', 'image' => '', 'width' => '320', 'height' => '240', ), $atts)); // Construction du code HTML $html = ""; $html .= "<div style='text-align:center;' id='" . $div . "'></div>\n"; $html .= "<script type='text/javascript'>\n"; $html .= " var so = new SWFObject('/player.swf','single','" . $atts["width"] . "','" . $atts["height"] . "','0');\n"; $html .= " so.addParam('allowfullscreen','true');\n"; $html .= " so.addParam('allowscriptaccess','always');\n"; $html .= " so.addParam('wmode','opaque');\n"; $html .= " so.addParam('autostart','false');\n"; $html .= " so.addParam('controlbar','bottom');\n"; $html .= " so.addVariable('file','" . $repmedia . $atts["file"] . "');\n"; if ($atts["image"] != "") { $html .= " so.addVariable('image','" . $repmedia . $atts["image"] . "');\n"; } $html .= " so.write('" . $div . "');\n"; $html .= "</script>\n"; return $html; } |
Cette fonction PHP sera utilisée par notre futur shortcode. Tu noteras la présence de la ligne permettant d’indiquer le répertoire des fichiers vidéos.
1 | $repmedia = "/bin/"; |
Tu peux modifier « /bin/ » avec le nom de ton répertoire qui contient tes médias. Attention à bien terminer par un slash.
Juste après l’accolade finale de cette fonction, toujours dans le fichier « functions.php » tu ajoutes la ligne suivante qui a pour but la création du shortcode « flv » .
1 2 | // Ajout du shortcode add_shortcode('flv', 'flv_func'); |
La dernière étape consiste à intégrer le code JavaScript qui permet au lecteur de fonctionner. Tu vas donc aller ouvrir le fichier « header.php » qui se trouve dans le répertoire de ton thème, et tu vas ajouter la ligne suivante à la suite des balises HTML. Attention à l’emplacement, normalement ce code devrait se trouver entre les balises « <head> » et « </head>.
1 | <script type='text/javascript' src='/swfobject.js'></script> |
Tu envoies les deux fichiers « functions.php » et « header.php » modifiés sur ton serveur et le tour est joué, tu peux maintenant utiliser le shortcode nommé « flv » pour intégrer facilement des vidéos dans tes billets.
Par exemple, pour jouer le fichier vidéo « mpm.flv » de 320 pixels par 240, avec comme image d’attente « mpm.jpg » .
1 | [flv file="mpm.flv" image="mpm.jpg" width="320" height="240"] |
Ce code affichera le résultat suivant aux visiteurs.
L’attribut « image » est optionnel. Voici le code pour jouer ce même fichier vidéo, mais sans image d’attente.
1 | [flv file="mpm.flv" width="320" height="240"] |
Une petite astuce pour terminer, si malgré tous mes avertissements tu as téléchargé le lecteur incluant le plugin Viral et que tu as la flemme de télécharger une version sans cette lourdeur supplémentaire, il te suffit d’ajouter ces quelques lignes à la fonction PHP (au milieu de celles qui se ressemblent) pour désactiver cet horrible message de partage en fin de vidéo.
1 2 3 | $html .= " so.addVariable('viral.allowmenu','false');\n"; $html .= " so.addVariable('viral.onpause','false');\n"; $html .= " so.addVariable('viral.oncomplete','false');\n"; |
C’est à toi de jouer maintenant. hack, php, shortcode, tutoriel, wordpress
Imprimer le billet
