Hi,

Je ne sais pas trop ou poster ça, mais je pense que ça pourrait en intéresser quelques uns. Il s'agit d'un mini tuto pour mettre à jour le plugin charlie content et lui permettre d'intégrer la balise video du HTML 5, conjointement à des fichiers de type webm, format censé détrôner un peu tout ce qu'on peut trouver comme format vidéo actuellement (l'avenir nous le dira...). Juste avant de commencer, je trouve qu'on ne s'y retrouve pas facilement dans le forum... Et pour contacter l'auteur d'un plug-in, pareil. Ca serait bien que les forums soient intégrés dans les pages des plug-ins plutot que sur la racine du site ; bref, fin du HS :o)

L'idée est de générer un fichier thumb en .jpg dans le dossier thumbnail, un fichier au format webm dans le dossier général, et le fichier original, quelle que soit son extension, dans le dossier pwg_high. Pour plus de détails sur le format webm, sachez qu'il repose sur des standards libres, mais une recherche sur google devrait vite vous apporter des précisions.

1. Dans un premier temps, on va installer un ffmpeg (sous linux dsl, pour Windows un soft de Miro permet la conversion me semble-t-il) capable de convertir n'importe quelle vidéo (ou presque) en webm. Je vous invite à lire un très bon tuto à ce sujet : http://libre-ouvert.toile-libre.org/?ar … -reencoder

2. Vous pouvez tester le résultat en écrivant une petite page html qui ressemble à ceci, et l'ouvrir dans un navigateur compatible : Chrome 6.0, firefox à partir de 4.0, et IE je sais pas :
<video width="..." height="..." autoplay controls>
    <source src="fichier.webm" type='video/webm; codecs="vp8, vorbis"'>
     <source src="fichier.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    ...
</video>
Vous pouvez préciser plusieurs lignes de source, la première qui sera reconnue sera utilisée. Pour les détails sur la balise vidéo : http://wwww.w3schools.com/html5/html5_video.asp

3. Maintenant que vous maitrisez à fond le webm, il nous reste à mettre à jour le plugin charlie'content. Dans un premier temps, on va écrire le fichier template dans le dossier charlie_content, disons charlie_html5.tpl (ou ajoutez "video" si vous voulez en écrire un autre pour la balise audio...). Son contenu est un mix entre un copier/coller d'un autre template et de la balise video qu'on vient de voir. Voici con contenu :
<!-- /charlie_html5.tpl -->
<br />
{* assign var="main_width" value="`$fileinfo.video.resolution_x+$by_style+$by_style`" *}
<div id="charlie" style="height: {$fileinfo.video.resolution_y}px; width:{$main_width}px; padding-top: 0px; margin-top: 0px;">
        <div class="{$curtain}_1" style="padding-left:{$by_style}px;">
                <div class="{$curtain}_2" style="padding-right:{$by_style}px;">
                        <video width="{$fileinfo.video.resolution_x}" height="{$fileinfo.video.resolution_y}" {if ($Charlies.autoplay==1)}autoplay{/if} controls>
                                <source src="{$FILEPATH}{$FILENAME}" type='video/webm; codecs="vp8, vorbis"'>
                                <source src="{$FILEPATH}{$FILENAME}" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
                                <source src="{$FILEPATH}{$FILENAME}" type='video/mp4; codecs="amp4v.20.8, mp4a.40.2"'>
                                <source src="{$FILEPATH}{$FILENAME}" type='video/ogg; codecs="theora, vorbis"'>
                                <source src="{$FILEPATH}{$FILENAME}" type='video/ogv; codecs="theora, vorbis"'>
                                <p> Le HTML 5 n'est pas supporté... Revenez plus tard !</p>
                        </video>
                </div>
        </div>
</div>
<p>
<a href="{$FILEPATH}pwg_high/{$FILENAME|regex_replace:"/\\.webm$/":""}">{$FILENAME|regex_replace:"/\\.webm$/":""}</a>
</p>
{html_head}
<link rel="stylesheet" type="text/css" href="{$CHARLIES_PATH|@cat:'charlies.css'}">
{/html_head}

Nous avons ajouté plusieurs notions qui n'existent pas de base dans le plugin. Les variables FILEPATH et FILENAME qui donnent le lien vers le fichier de façon relative (j'ai pas trouvé de variables existantes définies par le plug-in, mais je peux me tromper). Les différentes lignes sources, ne sont pas forcément utile,s mais j'ai pensé que cela pouvait prémunir contre certains fichiers qui ne serait pas codés de la même manière.
J'attire votre attention sur le lien href juste après la balise video : Cela affiche un lien vers le fichier du même nom sans l'extension .webm dans le dossier pwg_high. Il est donc important d'appeler son fichier webm fichier.mpg.webm si le fichier d'origine est au format mpg par exemple.

4.1 Mettre à jour le noyau du plug-in. Dans charlie.inc.php, ajouter les variable FILEPATH et FILENAME :
      'FILENAME'   =>  basename($path),
      'FILEPATH'   => preg_replace('/\/[^\/]*$/','/',$path),
Ces lignes s'ajoutent dans le tableau déclaré tout à la fin du fichier.

4.2 Associer le type webm, dans main.inc.php (et mp4 tant qu'on y est) au template Html5 (je crois que le mot clef correspond au commentaire en début de fichier du template, attention à la casse et à la correspondance). Ligne 103, après la liste des couleurs, on rajoute cette ligne :
        if (!isset($charlie['Html5']))                  $charlie['Html5'] = array('webm','mp4',);

4.3 Ajouter l'extension webm dans charlies_config.php, l. 29 :
....,'zip','rar','webm' ))

5. Mettre à jour le cache pour prendre en compte les modifications : supprimer le fichier _data/plugins/charlies_content.dat situé à la racine de piwigo.

6. Vous devriez voir apparaitre un dossier Html5 dans l'interface d'administration du plugin !


Ce n'est certainement pas la méthode la plus orthodoxe pour mettre à jour un plug-in, alors j'espère que l'auteur du plug-in ne m'en voudra pas trop, et en profitera pour intégrer les balises html5 video et audio dans sa prochaine release :) Disons qu'en attendant ça dépane.


Allez puisque vous êtes sages, la commande ffmpeg pour extraire une miniature d'une vidéo :
ffmeg -itsoffset XXX -i FFF -vframes 1 -an -s 108x80 TN-FFF.jpg

XXX : nombre de secondes depuis le début à balayer avant de faire la capture (Ex : 12.3, la capture se fait à 12300 ms).
FFF : Fichier à lire
108x80 : Format de sortie (le ratio ici est 4/3 en gros)
TN-FFF : Fichier de sortie, la miniature.


Une fois ffmpeg installé avec la prise en charge du webm, la commande pour convertir une vidéo en webm est triviale :
ffmpeg -i FFF.mpeg FFF.mpeg.webm


En espérant ne pas avoir été trop confus, et en aider quelques uns...