#1 2010-06-14 22:04:48

lapsus63
Membre
2010-06-14
2

[tuto] Charlie content : Support du Html5 avec webm

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...

Hors ligne

#2 2010-06-14 22:14:24

tosca
Former Piwigo Team
Cévennes (Gard)
2006-09-23
3818

Re: [tuto] Charlie content : Support du Html5 avec webm

lapsus63 a écrit:

Juste avant de commencer, je trouve qu'on ne s'y retrouve pas facilement dans le forum...

Sujet intéressant ... tu pourrais détailler dans un topic approprié, par exemple [Forum, topic 16810] Pour améliorer la lisibilité et "l'accessibilité" du forum ...

lapsus63 a écrit:

Et pour contacter l'auteur d'un plug-in, pareil.

As-tu essayé de cliquer sur le nom de l'auteur du plugin dans le gestionnaire d'extensions ? (copie d'écran) Tu arrives directement sur son profil forum, et il suffit ensuite de cliquer sur l'envoi d'un mail.

lapsus63 a écrit:

Ca serait bien que les forums soient intégrés dans les pages des plug-ins plutot que sur la racine du site

Le gestionnaire d'extensions donne la possibilité à l'auteur d'indiquer un lien (vers le forum éventuellement), mais tous les auteurs ne le renseignent pas systématiquement.

Hors ligne

#3 2010-06-15 05:56:36

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [tuto] Charlie content : Support du Html5 avec webm

lapsus63 a écrit:

Je ne sais pas trop ou poster ça,
.../...
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.
.../...
En espérant ne pas avoir été trop confus, et en aider quelques uns...

Génial.
Où est passé Charlie ? [Forum, topic 17688] [Plugin] Charlies' content 2.1.x
Le lien est directement sur [extension by jdd] Charlies\' content
Dès que tu es inscrit sur le forum, tu peux cliquer sur le pseudo d'un autre membre et si son profil l'accepte, lui adresser un MP.

Bref, non seulement je vais intégrer ton code (j'ai déjà une modif en attente), mais je vais essayer de simplifier la mise en oeuvre d'un nouveau player.
Disons que d'ici, 3 semaines/1 mois cela devrait être dispo.
Me relancer au besoin.

Un grand merci de ma part, et également de la communauté des webmasters vidéastes.

Note: j'ai regardé vite fait le html5 (je l'avais déjà fait mais...), et je présume que le doctype (Cf. Différences de HTML 5 par rapport à HTML 4) devra être adapté pour dire aux navigateurs qu'il s'agit de HTML 5. Ce que Charlies ne peut pas faire!
Mais c'est un autre sujet qui devrait être débattu dans un autre topic.


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#4 2010-06-15 07:46:46

lapsus63
Membre
2010-06-14
2

Re: [tuto] Charlie content : Support du Html5 avec webm

VDigital a écrit:

Où est passé Charlie ? [Forum, topic 17688] [Plugin] Charlies' content 2.1.x
Le lien est directement sur [extension by jdd] Charlies\' content
Dès que tu es inscrit sur le forum, tu peux cliquer sur le pseudo d'un autre membre et si son profil l'accepte, lui adresser un MP.

Le prochain coup j'me débrouillerai mieux ;-)

VDigital a écrit:

Bref, non seulement je vais intégrer ton code (j'ai déjà une modif en attente), mais je vais essayer de simplifier la mise en oeuvre d'un nouveau player.
Disons que d'ici, 3 semaines/1 mois cela devrait être dispo.
Me relancer au besoin.

Super, ça fait plaisir :-) La balise audio devrait être également attendue je pense.

VDigital a écrit:

Note: j'ai regardé vite fait le html5 (je l'avais déjà fait mais...), et je présume que le doctype (Cf. Différences de HTML 5 par rapport à HTML 4) devra être adapté pour dire aux navigateurs qu'il s'agit de HTML 5. Ce que Charlies ne peut pas faire!

Effectivement, mais a priori tu n'as pas de raison de t'inquiéter, ça marche parfaitement avec le doctype actuel de PWG.

Bonne continuation !

Hors ligne

#5 2011-08-11 14:49:41

ReunigKozh
Membre
Quimper
2011-08-11
29

Re: [tuto] Charlie content : Support du Html5 avec webm

Bonjour

Je découvre Piwigo et comme lapsus63, j'ai un peu de mal à m'y retrouver dans le forum mais aussi dans la documentation générale et la documentation des plugin. Je vais essayer de trouver le bon topic pour faire mes remarques

Je poste aussi pour savoir où en est l'idée 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" et savoir si le fichier webm pourrait être aussi un fichier ogg
Merci de vos réponses
René

Hors ligne

#6 2011-08-11 15:01:34

Gotcha
Ex Equipe Piwigo
Pierrelatte (26)
2007-03-14
13331

Re: [tuto] Charlie content : Support du Html5 avec webm

Bonjour,
L'auteur du plugin aillant laisser tomber ses contributions, il n'y a actuellement aucune avancé sur ce plugin...


Ayez comme premier réflexe de consulter le wiki.
Ensuite, veuillez effectuer une recherche sur le forum avant de poser votre question.

LE FAIRE EST LE REVELATEUR DE L'ETRE

Hors ligne

#7 2011-08-11 15:13:18

ReunigKozh
Membre
Quimper
2011-08-11
29

Re: [tuto] Charlie content : Support du Html5 avec webm

Gotcha a écrit:

Bonjour,
L'auteur du plugin aillant laisser tomber ses contributions, il n'y a actuellement aucune avancé sur ce plugin...

Merci de l'information
René

Hors ligne

#8 2011-12-30 14:06:44

freechelmi
Membre
2009-12-26
40

Re: [tuto] Charlie content : Support du Html5 avec webm

Salut , je cherches aussi a automatiser la creation de la miniature afin de pouvoir a terme Uploader mes videos via l'interface Web de Piwigo et ne plus avoir a utiliser un script coté client.

A priori la seul façon serait d'utiliser php-ffmpeg sur le serveur ? y a t il une autre librairie qui permettrait de faire ça sans ffmpeg sur le serveur ?

Hors ligne

#9 2012-01-22 01:54:26

freechelmi
Membre
2009-12-26
40

Re: [tuto] Charlie content : Support du Html5 avec webm

@lapsus63 : je ne vois pas comment tu gère un affichage avec 2 sources différentes proposés ? mp4 et Webm


C'est pourtant le but : Que suivant le navigateur l'une ou l'autre soit utilisé.

Hors ligne

#10 2012-01-22 08:34:18

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
16922

Re: [tuto] Charlie content : Support du Html5 avec webm


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#11 2012-01-22 12:33:51

freechelmi
Membre
2009-12-26
40

Re: [tuto] Charlie content : Support du Html5 avec webm

Effectivement ça me parait tres proche de ce que je veux faire , je penser utiliser videojs ou leanback mais jplayer ira tres bien je pense.

De plus je vois que c'est tout frais

Hors ligne

#12 2012-01-22 23:24:25

freechelmi
Membre
2009-12-26
40

Re: [tuto] Charlie content : Support du Html5 avec webm

Salut , donc je n'ai pas vraiment réussi a faire marcher jplayer mais c'est un autre sujet.

j'ai donc patché CharliesContent , mais un peu différemment de la méthide expliqué sur ce fil , car le support multi fichier marche correctement ( webm, mp4 , ogv )


Le patch a appliqué sur le plugin charlies content est la :


http://ubuntuone.com/3nMcp2eTsxUq6fcqCTk8pO

Dernière modification par freechelmi (2012-01-22 23:32:54)

Hors ligne

#13 2012-01-23 08:18:53

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
16922

Re: [tuto] Charlie content : Support du Html5 avec webm

@freechelmi

Merci
est e que tu peux expliquer ce que tu as fait ?

est ce que cela peux être intégré pour une nouvelle version ou cela 'casse' autre chose ?


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#14 2012-01-23 14:22:21

Gotcha
Ex Equipe Piwigo
Pierrelatte (26)
2007-03-14
13331

Re: [tuto] Charlie content : Support du Html5 avec webm

Pour tester, on doit s'y prendre comment ??


Ayez comme premier réflexe de consulter le wiki.
Ensuite, veuillez effectuer une recherche sur le forum avant de poser votre question.

LE FAIRE EST LE REVELATEUR DE L'ETRE

Hors ligne

#15 2012-01-23 16:32:34

freechelmi
Membre
2009-12-26
40

Re: [tuto] Charlie content : Support du Html5 avec webm

Tres simple :

- Installer la dernière version sur Charlies
- Ecraser le repertoire de charlies avec les fichiers de mon Zip
- uploader une video Webm et/ou MP4 et synchroniser la gallerie


je vais mettre tout ça au propre dans un nouveau plugin prochainement ....

Hors ligne

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact