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.

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.


, , , ,

12 commentaires

  1. Tu veux un commentaire ? Dans l’absolu, ça m’intéresse carrément, mais en pratique, je crois que vais rester avec mon wordpress.com (zzz)
  2. Je ne « veux » pas un commentaire dans l’absolu, mes pieds sont assez sur terre pour réaliser à quel niveau ce billet est pointu. (radoteur)

    Mais merci, je n’en attendais pas un aussi rapidement. (chinois)
  3. Rassure moi en programmation il y a beaucoup de copier coller???
  4. @Giovanni
    Elle est vague ta question. :-P

    D’une manière générale non, il n’y a pas beaucoup de copier-coller. La grande majorité de mon code est original, parfois inspiré, mais original.

    De ton côté si tu veux mettre en place la solution intégrée dans ce billet, alors là oui c’est uniquement du copier-coller, il n’y a normalement pas besoin de modifier mon code.
  5. Excellent blog l’ami ! :-D

    Mais tout cela tourne sous WordPress ? Le nuage de tags est très sympathique ! Et y aurait-il un moyen de le récupérer quelque part… :roll: Mais bon, étant donné que tu es informatien, c’est sans doutes du fait-main…
    Les textes et images sont sous Contrats CC, mais quant est-il du template ? Je n’ai trouvé aucune licence ou un copyright là dessus.

    En tous cas, bonne continuation. ;-)


    Ned, lecteur breton.
  6. Merci pour ce compliment Ned le breton! (chinois)

    Voici quelques réponses aux questions que tu poses.

    Premièrement oui, tout le blog tourne sous WordPress, la version francophone même : http://www.wordpress-fr.net/

    J’ai essayé d’autres plateformes mais WordPress reste selon moi la plus évolutive, avec un max de plugins et des thèmes par centaines.

    Le nuage de tag est le plugin WP-Cumulus : http://wordpress.org/extend/plugins/wp-cumulus/

    Le thème se base sur Coogee que j’ai complètement retouché pour l’adapter à mes besoins (bannière, code XHTML, PHP et CSS) : http://wordpress.org/extend/themes/coogee

    A bientôt! (coucou)
  7. Au fait, qu’utilises-tu pour convertir (si c’est nécessaire) tes vidéos en Flash (flv) ?
  8. J’utilise « SUPER », le meilleur que je connaisse, gratuit et performant.

    http://www.erightsoft.com/SUPER.html

    Un peu difficile à prendre en main au départ à cause des centaines d’options, mais imbattable au final.
  9. (Mode: Grand yeux de bambi innocent qui battent des cils)

    Est-ce que tu pourrais, s’il te plait ajouter une ligne du genre

    1
    $html .= "<a href='".$repmedia.$atts["file"]."'>Download ".$atts["file"]."</a>";


    ou quelque chose de similaire pour les non flasheurs ? Merci !
  10. J’y crois pas, il m’a carrément pondu le code PHP. 8-O

    Faut que je fasse de même avec mon lecteur mp3, par contre ce ne sera pas rétroactif, tout mes vieux messages n’auront pas le lien.

    Ceci dit je me demande comment tu vas bien pouvoir ouvrir les fichiers FLV téléchargés sans avoir Flash.
  11. @Gael > Pondu le code de tête :

    Je suis médecin *et* bioinformaticien. Ceci explique cela. Et bien d’autres choses. :crazy:

    > ouvrir les fichiers FLV sans Flash :
    .FLV (et .MP3 aussi) le démultiplexage et la lecture de ces fichiers sont supportés par la majorité des lecteurs opensource sur la majorité des plateformes.
    VLC et MPlayer le peuvent par exemple, et ils sont disponibles sur à peu près n’importe quoi comme machine (y compris des trucs complètement ésotérique comme OpenMoko).

    Alors que beaucoup des lecteurs vidéo flash ne passent pas forcément sur Gnash qui lui même n’est pas encore disponibles comme plugin sur tous les butineurs. (Pas de gnash pour les webkit de téléphone, il me semble).

    Cela dit, il me semble que les versions récente de Flash (genre 10.1) peuvent aussi démultiplexer des vidéos stockées dans des transporteurs MP4 standards (en plus des FLV propres à flash) et donc c’est possible du coup de stocker tes vidéos dans un format relativement standard (genre MPEG-4 AVC/H.264 + AAC + MP4) qui du coup passe aussi comme une lettre à la poste sur iPhone, Palm WebOs, et à peu près tous les butineurs.
    Sauf ceux qui ont des problèmes de brevets logiciels (genre FireFox et Opera qui exigent Theora + Vorbis + OGG)

    Donc vois si une version récente de ton player supporte la lecture de .MP4.
  12. Mon lecteur supporte le mp4, j’ai je crois déjà posté une ou deux vidéos sous ce format. Sinon je reste dans les standards avec le H.264 ou similaires propres à une diffusion sur le web.

    J’évite pour l’instant tous les autres formats ouverts ou exotiques, j’ai envie que la majorité de mes visiteurs puissent quand même lire mes vidéos sans être de gros geeks qui utilisent un plugin spécifique qu’il faut compiler à la main. (lol)

    Sinon j’ai mis en place les liens de téléchargement sous chaque vidéo récente (qui utilise mon shortcode en fait).

    Tu demandes, je délivre. (roses)

Tu peux même laisser ton avis

Prends juste note que tout commentaire désobligeant, illégal, publicitaire, agressif, mal écrit ou tout simplement ennuyeux sera cruellement supprimé sans préavis, sans explication et sans excuse par le dictateur autoproclamé actuellement au pouvoir.

|-| XX( ??? <3 ;-) :yes: :twisted: :roll: :oops: :no: :mrgreen: :lalala: :idea: :evil: :cry: :crazy: :arrow: :?: :-| :-x :-p :-o :-P :-D :-? :-) :-( :!: 8-O 8) (zzz) (woohoo) (vomi) (tusors) (troll) (suisse) (suicide) (sigh) (siffle) (roses) (radoteur) (pope) (pleure) (pendu) (ouch) (mur) (mechant) (lulz) (lol) (hum) (haha) (god) (fou) (fache) (evilfinger) (endormi) (embarrasse) (coucou) (chinois) (censored) (bouffon) (bisou) (badday) (avosordres) (applau)

Sur le même thème