Inclure une vidéo de DailyMotion, Youtube ou autre dans eZ publish

Tout à l'heure en rédigeant (c'est un bien grand mot) It's not too late je me suis trouvé face à un problème courant dans le web actuel : inclure une vidéo avec son lecteur flash fournie par un service tier. Après une courte réflexion, j'ai trouvé deux solutions à ce problème :

 

  1. Créer une classe "Video externe" regroupant les informations nécessaires et utiliser la possibilité d'inclure des objets eZ Publish dans un bloc XML selon différentes vues avec la balise <embed/>

  2. Utiliser un custom tag avec les différents attributs nécessaires pour inclure la vidéo.

 

J'ai finalement choisi la deuxième solution pour deux raisons :

 

  1. Seuls 3 paramètres sont nécessaires à l'affichage du lecteur de vidéo (URL, largeur, hauteur), il est donc peu contraignant de remplir le formulaire d'insertion d'un custom tag.

  2. La première solution oblige à d'abord créer l'objet "Video externe" avant de pouvoir l'inclure dans le bloc XML à l'aide de Online Editor. Pas très pratique. Il serait peut être possible de créer automatiquement un objet de ce type directement dans l'éditeur comme on peut le faire pour un document à télécharger ou une image en détectant une adresse http mais cela me paraît trop complexe pour mon utilisation ponctuelle. KISS! (Keep It Simple Stupid)

La création d'un custom tag est assez simple. Je l'ai appelé dailymotion car il est à la base prévu pour inclure une video de ce service, mais cela marche aussi pour Youtube et certainement pour les autres... Pour cela, il suffit de modifier le fichier /settings/override/content.ini;append.php comme suit :

 

[CustomTagSettings]
AvailableCustomTags[]=dailymotion
IsInline[dailymotion]=true 

 

Il faut ensuite créer le template qui affichera le custom tag. Celui ci doit se nommer comme le tag et se trouver dans template/content/view/datatype/ezxmltags dans un des designs utilisés par le site. Dans ce template, la variable $content stocke le contenu du custom tag et les différents attributs sont accessibles par des variables du même nom. Mon fichier template/content/view/datatype/ezxmltags/dailymotion.tpl ressemble à :

 

<div class="video">
    <object width="{$width}" height="{$height}" type="application/x-shockwave-flash" data="{$content}">
        <param name="movie" value="{$content}"></param>
        <param name="allowfullscreen" value="true"></param>
    </object>
</div>

 

Pour que ce nouveau template soit pris en compte, il faut vider le cache, il n'est pas nécessaire de vider tous les caches mais seulement ceux liés aux overrides de template. Ce qui peut se faire avec le script ezcache.php avec la ligne suivante (à adapter selon votre configuration...) à la racine du site eZ Publish :

 

$ php4 bin/php/ezcache.php -s plain_site_user --clear-id=template-override

 

Comme on peut le voir dans le template, mon custom tag dailymotion attend donc comme attributs la hauteur (height) et la largeur (width) du lecteur. Dans Online Editor, il faut donc remplir le formulaire comme ci-dessous :

 

 

Et au final, on obtient :

 

 

Easy ;-)

» Commentaires

- Merci pour le tuto ;-) (#64227) par Hicham ex Cairo le 03 Février 2007 à 11:46
Trés sympa à toi, je vais essayer.
On espérant que ça passe sous EZ 6.1
;-)
- Pas mal (#64236) par Fiber_Optic le 03 Février 2007 à 13:50
Je vais bientôt avoir ce besoin. L'avantage de ta solution est quelle est très souple pour l'utilisateur.
Par contre, je vois un inconvénient majeur (tu vas me dire si je me trompe) : tu ne peux pas avoir un catalogue de vidéo. Tu ne peux pas faire de recherche sur les vidéos du site.
Pour celà, je verrais plutôt une nouvelle classe vidéo, avec un titre, une description etc... Après, dans un article, tu peux le mettre en "related object".
- Tu as raison (#64237) par Damien le 03 Février 2007 à 15:22
Fiber_Optic> tu as complètement raison. C'est certainement le point négatif de cette technique.
Il doit néanmoins être possible d'écrire un opérateur permettant de récupèrer tous les objets ayant le custom tag "dailymotion" dans un champ "Bloc XML" mais c'est effectivement un peu compliqué...
- Et en utilisant les attributs de base ? (#64292) par Vallica le 07 Février 2007 à 14:55
Salut !

Une solution non essayée qui me passe par la tête :

- Copier la classe billet blog ou la modifier pour y ajouter 1 datagrid à 4 colonnes :

- url de la video
- largeur
- hauteur
- titre/commentaire (indexable pour la recherche par exemple)

- Dans la vue full de l'objet, tester la présence de lignes dans le datagrid, et pour chaque ligne se servir des 4 variables pour renseigner les balises flash.

Cela permet d'ajouter autant de vidéos que nécessaire, et de les indexer dans le moteur de recherche.

Bon je rappelle que je n'ai pas testé =)
- C'est une autre bonne façon de faire (#64293) par Damien le 07 Février 2007 à 19:26
Vallica> C'est une autre méthode effectivement. Le seul inconvénient est de ne pouvoir insèrer la vidéo où tu le souhaites dans le texte, ce qui est plus ou moins dérangeant... C'est aussi simple que le custom tag pour l'utilisateur et mais cela ne permet pas non plus de faire simplement une liste de toutes les vidéos publiés (je crois pas qu'on puisse faire un fetch list ou tree en spécifiant que l'on veut les objets dont l'attribut video est rempli).
- En effet (#64300) par Vallica le 07 Février 2007 à 19:53
Oui c'est clair je ne crois pas que ce soit possible donc ca demanderait un développement supplémentaire pour arriver à ce fetch perso.
- Et les attributs? (#66042) par Charlycoste le 18 Juillet 2007 à 15:26
Pour faire la même chose je suis parti d'une extension pour youtube dans la section contribution de ez.no
Et il y a ceci que je rajoute dans le fichier content.ini.append.php:

[dailymotion]
CustomAttributes[]=movie_url
CustomAttributes[]=width
CustomAttributes[]=height
CustomAttributesDefaults[movie_url]=
CustomAttributesDefaults[width]=400
CustomAttributesDefaults[height]=316

Sans ça, la fenêtre ne me propose pas les attributs.
- Coquille (#66505) par Sébastien le 24 Novembre 2007 à 15:17
Une petite erreur sur une url
tu as écris : template/content/view/datatype/ezxmltags
à la place de : template/content/datatype/view/ezxmltags
il faut inverser datatype et view
- coment trouver le bon template (#66597) par abriotde le 04 Janvier 2008 à 10:33
Je me demande comment tu as fait pour savoir que c'était le template 'template/content/view/datatype/ezxmltags' qu'il falait sudéfinir.
Moi je cherche le template utiliser pour une autre cas, celui du <embed view="full" [...]/>.
- RE: Et les attributs? (#66856) par azurams le 20 Mai 2008 à 12:13
j'ai bien rajouté les attributs comme le préconise Charlycoste, mais jamais le template d'insertion ne me propose les attributs.

j'ai bien décaché les ini et les templates mais rien à faire.

Une idée ? je suis sur EZ 3.8.7
- Bien vu! (#67511) par Sylvain_G le 03 Février 2009 à 21:38
Merci pour ce billet, ca m'a bien dépanner. Par contre je ne comprend pas très bien à quoi sert
IsInline[dailymotion]=true

De plus dans mon popup custom tag il y a deux pb:
1. Le champs texte est grisé, je sais pas pourquoi, alors que j'aurai aimé l'utilisé comme champs pour saisir l'url.

2. Lors de la modification d'un custom Tag, sous ez4.0.1 il ne sélectionne pas automatiquement le custom tag courant dans la drop list >_<

J'en connais un qui va faire du BugReport chez ez.no
- Balise object (#67786) par Pet2poule le 15 Mai 2009 à 12:14
Chez moi la balise object a l'air d'être rejetée par ezpublish à l'affichage. Version 4.01.
- Affichage dans l'éditeur (#67789) par pma le 19 Mai 2009 à 09:09
Bonjour, comment faire pour que la balise personnalisée n'affiche pas ce rectangle bleu mais affiche plutôt un template associé au custom tag ? Merci
- Balise rejeter :( (#67809) par Vincent le 28 Mai 2009 à 15:02
Salut, merci pour ce petit tuto fort utile,
j'ai un soucis par contre j'ai créer une classe contenant la taille, lien, titre et descriptif et ainsi j'ai surcharger une template afin d'afficher mon business comme je le souhaite, mais le problème c'est qu'il me prend l'espace de la taille définie sur la page, mais pas de vidéo qui se charge :( ca reste blanc :(
J'utilise ez 4.1.1, aurai-je oublier quelque chose?

merci :)
- Résolue ^^ (#67810) par Vincent le 28 Mai 2009 à 15:22
Juste par rapport à mon commentaire plus haut, j'ai essayer un autre lien (youtube) et ça à fonctionner :)

Merci encore du tuto :)
- Vraiment pratique et puissant (#68040) par Matthieu le 19 Novembre 2009 à 10:02
Merci beaucoup pour ce ticket.

Tu ne l'as pas mis dans le ticket mais on peut vraiment configurer le custom tag, c'est-à-dire les options de chaque champ.

Je me m'explique par un exemple.
Vous souhaitez pouvoir ajouter une vidéo Dailymotion avec plusieurs paramètres possibles :
- hauteur / largeur
- alignement (gauche / centré / droite)
- lecture automatique : oui ou non

Pour cela, modifiez le fichier /settings/override/content.ini.append.php et ajoutez les lignes suivantes :

[CustomTagSettings]
...
AvailableCustomTags[]=dailymotion

[dailymotion]
CustomAttributes[]
CustomAttributes[]=url
CustomAttributes[]=width
CustomAttributes[]=height
CustomAttributes[]=align
CustomAttributes[]=autoplay

Ensuite, copiez le fichier /extension/ezoe/settings/ezoe_attributes.ini et coller le dans /settings/override/ en renommant le nom pour content.ini.append.php. Puis, ajoutez les lignes suivantes :
[dailymotion]
CustomAttributes[]=url
CustomAttributes[]=width
CustomAttributes[]=height
CustomAttributes[]=align
CustomAttributes[]=autoplay

[CustomAttribute_dailymotion_url]
Name=URL
Type=link
Required=true

[CustomAttribute_dailymotion_width]
Name=Largeur
Type=int
Required=true

[CustomAttribute_dailymotion_height]
Name=Hauteur
Type=int
Required=true

[CustomAttribute_dailymotion_align]
Name=Alignement
Type=select
#Required=true
Selection[]
Selection[left]=Gauche
Selection[align_center]=Centrer
Selection[right]=Droite

[CustomAttribute_dailymotion_autoplay]
Name=Lecture automatique
Type=select
Selection[]
Selection[false]=Non
Selection[true]=Oui

Enfin, le fichier template/content/view/datatype/ezxmltags/dailymotion.tpl ressemble maintenant à ça :
{def $class = ''}

{switch match=$align}
{case match='left'}
{set $class = ' class="left"'}
{/case}

{case match='center'}
{set $class = ' class="align_center"'}
{/case}

{case match='right'}
{set $class = ' class="right"'}
{/case}

{case}
{/case}
{/switch}

<div{if $class}{$class}{/if}>
<object type="application/x-shockwave-flash" data="{$url}{if $autoplay|eq('true')}&amp;autoplay=1{/if}" width="{$width}" height="{$height}">
<param name="movie" value="{$url}{if $autoplay|eq('true')}&amp;autoplay=1{/if}" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
</object>
</div>

Voilà, j'espère que j'aurais aider certains d'entre vous.

Pour plus d'informations, regardez le contenu du fichier /extension/ezoe/settings/ezoe_attributes.ini où sont expliquées toutes les options.
- Correction de mon précédent commentaire (#68042) par Matthieu le 20 Novembre 2009 à 11:32
ATTENTION:

Je me suis trompé dans mon précédent commentaire à la phrase suivante :
"Ensuite, copiez le fichier /extension/ezoe/settings/ezoe_attributes.ini et coller le dans /settings/override/ en renommant le nom pour content.ini.append.php."

Il faut faire :
"Ensuite, copiez le fichier /extension/ezoe/settings/ezoe_attributes.ini et coller le dans /settings/override/ en renommant le nom pour ezoe_attributes.ini.append.php."

Mille excuses
- Encore une correction (#68043) par Matthieu le 20 Novembre 2009 à 11:42
ATTENTION:

Pour la phrase :
"Enfin, le fichier template/content/view/datatype/ezxmltags/dailymotion.tpl ressemble maintenant à ça :", il faut faire : "Enfin, le fichier template/content/datatype/view/ezxmltags/dailymotion.tpl ressemble maintenant à ça :".

D'ailleurs j'ai fait un copier/coller du ticket donc il faudra mettre à jour le ticket pour avoir "template/content/datatype/view/ezxmltags/dailymotion.tpl" au lieu de "template/content/view/datatype/ezxmltags/dailymotion.tpl".

» Trackback

Aucun trackback

Les trackacks sont désactivés

Flux RSS des billets

Flux RSS des billets

Rechercher sur pwet.fr

À retenir

Derniers commentaires

Archives

Nuage de tags

Bioutifoul photos

Quelques liens

Licence d'utilisation

Contenu sous Licence Creative Commons By-Sa

Sauf mentions spécifiques, les billets et les photos publiés sur ce site sont placés sous la licence Creative Commons by-sa.

Pour toute utilisation dépassant le cadre de cette licence, merci de me contacter par e-mail.

Login