eZ Publish : installer JW Desktop Player (lecteur flash video avec liste de lecture)

Date de publication: le Mardi 11 Novembre 2008 à 17h16
Dernière modification: par Pascal BOYER le Mercredi 6 Mai 2009 à 13h37
« Article précédent: eZ Publish : création automatique d'une galerie d'images CSS - Partie I
» Article suivant: eZ Publish : créer un multi-site I

Objectif

Cet article détaille la mise en oeuvre du lecteur flash créé par Jeroen Wijering.

Ce lecteur a l'avantage d'être libre de droit pour les sites non commerciaux (30 euros par site pour une utilisation commerciale), de proposer le code source, d'être très configurable, et de proposer de nombreuses documentations pour l'adapter à nos besoins.

Consultez également cette page pour de plus amples informations sur les innombrables possibilités offertes par le lecteur de Jeroen Wijering.
Sur cette page vous trouverez l'ensemble des flashvars supportées par le lecteur.

De plus, ce lecteur contient une liste de lecture (playlist) qu'il est possible d'afficher à droite ou sous le lecteur et pouvant être alimentée par le biais d'un fichier xml. C'est d'ailleurs la solution que j'ai retenue pour l'exemple de cet article.

Cette dernière solution sera l'occasion de visiter quelques solutions techniques intéressantes proposées par eZ Publish.

Compatibilité du lecteur

Ce lecteur est compatible avec les navigateurs suivants:

Firefox 2 et 3.x (Linux et Windows)
Opéra 9.61 (Linux et Windows)
Safari (Windows et MAC)
IE7 et IE8

Les navigateurs et versions cités ci-dessus sont ceux que j'ai effectivement testés.

PHP streaming avec le lecteur JW Desktop Player

Je profite de l'occasion pour vous signaler l'existence d'un projet de streaming PHP articulé autour du lecteur JW Desktop Player:

PhilFlash

Exemple du lecteur JW Desktop Player

La figure ci-dessous illustre le résultat de la mise en oeuvre du lecteur JW Desktop Player sur un site eZ Publish:

Fig. 1: Exemple de mise en oeuvre du lecteur JW Desktop Player

Prérequis

Pour la suite de l'article, on supposera

que le siteaccess se nomme plain_site (settings/siteaccess/plain_site/),
que les vidéos sont placées sous «un noeud/une rubrique» de type "folder" (description détaillée ci-après),
que ce noeud appartient à une section pour laquelle les visiteurs anonymes ont le droit de lecture,
que les vidéos sont instanciées à partir d'une classe d'objet dont l'identifiant est video_flash,
que le lecteur sera affiché lorsque les visiteurs cliqueront, dans le menu du site, sur le nom de la rubrique.

La classe d'objet rubrique_mediatheque

Cette classe d'objet est créée afin d'instancier le noeud (la rubrique) qui contiendra les vidéos.

Fig. 2: Description de la classe d'objet rubrique_mediatheque

:
On supposera que le noeud instancié à partir de cette nouvelle classe est situé sous le noeud racine de l'arborescence (de ID=2) et se nomme simplement «Médiathèque».

La classe d'objet video_flash

Cette classe d'objet est créée afin d'instancier les objets vidéos placés sous la rubrique «Médiathèque».

Fig. 3: Description de la classe d'objet flash_video

Description des attributs de la classe flash_video:

Nom de la vidéo : cet attribut permet de définir le nom de l'objet vidéo tel qu'il apparaît dans l'arborescence (voir fig. 4 ci-dessous)
Titre de la vidéo : cet attribut permet de définir le titre de la vidéo tel qu'il apparaît en gras sur la première ligne de la liste de lecture (voir fig. 1)
Synopsis de la vidéo : cet attribut permet de définir le résumé de la vidéo tel qu'il apparaît sous le titre dans la liste de lecture (voir fig. 1).
Vignette associée à la vidéo : cet attribut permet de télécharger une vignette associée à la vidéo tel qu'elle apparaît à gauche du titre dans la liste de lecture (voir fig. 1). A noter que cette vignette peut être affichée avant le démarrage de la vidéo associée.
Télécharger la vidéo : cet attribut permet de télécharger le fichier/la vidéo au format .flv.

Pour le lecteur présenté par cet article, je me suis contenté de prendre un des skins proposé par la page SetupWizard. Il s'agit de l'exemple 6 flvplayer with en rss playlist dont j'ai configuré les options proposées sur cette même page.

Cependant vous pouvez tout à fait créer votre propre skin où en choisir un parmi tous ceux proposés sur cette page.

Tout en conservant le skin que j'ai retenu pour l'exemple de cet article, vous pouvez très facilement en changer les couleurs pour les adapter à votre site.

:
Le choix du lecteur s'est porté sur l'exemple N°6 car il est nativement prévu pour lire une liste de lecture au format xml que je suis en mesure de produire automatiquement et contenant exactement les informations que je souhaite.

Création des objets vidéo

Après avoir créé la rubrique Médiathèque et les objets vidéo qu'elle contient, voici à quoi ressemble le menu Contenus de l'interface d'administration:

Fig. 4: Arborescence du menu Contenus de l'interface d'administration

Le template de vue du noeud Médiatèque

Par défaut, eZ Publish utilise le template design/standard/templates/node/view/full.tpl pour afficher les objets instanciés par de nouvelles classes.

C'est donc ce template qui sera utilisé, par défaut, pour l'affichage du noeud Médiathèque.

Ce template ne convenant pas à notre cas particulier, nous allons commencer par créer une surcharge.

Surcharge du template full.tpl

Au tout début du fichier de surcharge settings/siteaccess/plain_site/override.ini.append.php, placez les lignes suivantes:

[full_rubrique_mediatheque]
Source=node/view/full.tpl
MatchFile=full/dossierMediatheque.tpl
Subdir=templates
Match[class_identifier]=rubrique_mediatheque

Puis créez, dans le répertoire design/plain_site/override/templates/full/ le template dossierMediatheque.tpl:

Contenu du template dossierMediatheque.tpl

Vous trouverez ci-après les lignes nécessaires et suffisantes pour afficher le lecteur JW Desktop Player:

{def  $liste_videos=fetch('content','list_count',hash( parent_node_id, $node.node_id,
                                                            'class_filter_type', 'include',
                                                            'class_filter_array', array( 'video_flash')))}

<div class="content-view-full">
    <div class="class-folder">
                {if gt($liste_videos,0)}
                    <div class="ombrePlayer">
                    <div id="player"></div>{* INDISPENSABLE POUR L'AFFICHAGE DU PLAYER *}
                    {literal}
                        <script type="text/javascript" src={/literal}{'flashPlayer/swfobject.js'|ezdesign}{literal}></script>
                        <script type="text/javascript">
                            var so = new SWFObject('{/literal}{'flashPlayer/playerListe.swf'|ezdesign(no)}{literal}','mpl','700','480','9');
                            so.addParam('allowscriptaccess','always');
                            so.addParam('allowfullscreen','true');
                            so.addParam('flashvars','file={/literal}{'flashPlayer/liste.xml'|ezdesign(no)}{literal}&backcolor=0B3257&frontcolor=98A7B7&lightcolor=b2c2b9&screencolor=000000&playlistsize=181&streamer=lighttpd&playlist=bottom&autostart=false');
                            so.write('player');
                        </script>
                    {/literal}
                    </div>{* ombrePlayer *}
                {/if}
    </div>
</div>

Les paramètres de la ligne «so.addParam('flashvars',.....» sont issus de la page FlashVars. Vous pouvez bien évidemment les tester en temps réel sur la page Setup Wizard.
A noter que cette ligne contient l'appel au fichier liste.xml (voir ci-dessous) contenant la liste de lecture des vidéos.
Consultez la documentation traduite de ezdesign si vous ne comprenez pas l'emploi de l'option «(no)»

Télécharger le fichier swfobject.js

Le fichier swfobject.js (placé dans le répertoire design/plain_site/flashPlayer/) est téléchargeable à partir de cet URI: http://content.longtailvideo.com/files/swfobject.js

Télécharger le lecteur flash

Comme je l'ai déjà indiqué précédemment, le lecteur utilisé pour l'exemple de cet article est celui employé par l'exemple 6 de la page Setup Wizard.

Pour télécharger le lecteur, placez-vous dans le répertoire design/plain_site/flashPlayer/ puis lancez la commande suivante:

wget http://content.longtailvideo.com/files/player.swf -O playerListe.swf

Création de la liste de lecture (fichier liste.xml)

Le modèle de fichier xml à produire est donné par le code source de la page suivante: mrss.xml

Pour créer ce fichier, nous allons utiliser le module layout.

Création du template de mise en page videoplayer_pagelayout.tpl

Comme l'indique la documentation, le module layout permet de forcer l'utilisation d'un template de mise en page autre que celui utilisé par défaut, à savoir pagelayout.tpl.

La définition de ce nouveau template de mise en page se fait à partir du fichier de configuration de surcharge suivant:

settings/siteaccess/plain_site/layout.ini.append.php

Sont contenu est le suivant:

<?php ini charset="iso-8859-1"?

# Le nom de la rubrique, ici xml, devra etre repris dans l'URI de type /layout/set/xml/content/view/
[xml]
PageLayout=videoplayer_pagelayout.tpl

Ceci indique au système que l'utilisation d'un URI de la forme http://monsite.com/layout/set/xml/content/view/template_de_vue/ID_du_noeud doit utiliser le template de mise en page videoplayer_pagelayout.tpl.

Afin de reproduire le code source de la page mrss.xml, voici ce que doit contenir le template videoplayer_pagelayout.tpl placé dans design/plain_site/templates/:

<!-- CE FICHIER EST UTILISE EN RAISON DE CE QUI EST INDIQUE DANS settings/siteaccess/plain_site/layout.ini.append.php -->
<rss version="2.0" xmlns:media="http://luxpopuli.fr/">
    <channel>
    <title>Example media RSS playlist for the JW Player</title>
     <link>http://www.jeroenwijering.com</link>
   {$module_result.content}
    </channel>
</rss>
<!--DEBUG_REPORT-->

Le tableau $module_result contient le résultat de l'exécution du couple module/vue.

Dans l'URI http://monsite.com/layout/set/xml/content/view/template_de_vue/ID_du_noeud, le nom du template de vue (voir ci-après) est défini par /template_de_vue/. Quant au ID_du_noeud qui termine l'URI il vaut bien sûr celui du noeud Médiathèque que vous avez précédemment créé.

Création du template de vue videolist.tpl

Placé dans le répertoire design/plain_site/templates/node/view/, ce template contient le code suivant:

{let    $videos=fetch_alias(children,hash( 'parent_node_id', $node.node_id,
                                            'sort_by', array('priority',true()),
                                            'class_filter_type', 'include',
                                            'class_filter_array', array( 'video_flash')),
                                            'depth', 1)}
{foreach $videos as $video}
        <item>
            <title>{$video.data_map.title.content}</title>
            <link>http://linuxorable.fr</link>
            <description>{$video.data_map.description.content.input.input_xml}</description>
            <media:content url={concat('"http://',ezsys('hostname'),$video.data_map.content.content.filepath|ezroot(no),'"')} type="video/x-flv" />
            <media:thumbnail url={concat('"http://',ezsys('hostname'),$video.data_map.thumbnail.content[vignettePlaylist].full_path|ezroot(no),'"')} />
        </item>
{/foreach}

Création de la liste de lecture liste.xml

Ce fichier sera placé, par exemple, dans le répertoire design/plain_site/flashPlayer/

Placez-vous dans ce répertoire et lancez la commande suivante:

wget http://monsite.com/index.php/plain_site/layout/set/xml/content/view/videolist/226 -O liste.xml

--2008-11-12 20:06:05--  http://linuxorable.fr/index.php/plain_site/layout/set/xml/content/view/videolist/226
Résolution de linuxorable.fr... 88.180.9.115
Connexion vers linuxorable.fr|88.180.9.115|:80...connecté.
requête HTTP transmise, en attente de la réponse...200 OK
Longueur: 4870 (4,8K) [text/html]
Saving to: `liste.xml'

100%[============================================>] 4 870       --.-K/s   in 0s

2008-11-12 20:06:06 (709 MB/s) - « liste.xml » sauvegardé [4870/4870]

...où:

monsite.com sera remplacé par le nom de domaine de votre site,
plain_site sera remplacé par le nom du siteacces public de votre site
226 sera remplacé par le numéro de ID du noeud Médiathèque.

Ce fichier une fois créé, vous pouvez afficher votre player sur votre site.

Automatisation de la création du fichier liste.xml

Si dans le template dossierMediatheque.tpl on indique directement l'URI du fichier liste.xml:

so.addParam('flashvars','file={/literal}http://monsite.com/index.php/plain_site/layout/set/xml/content/view/videolist/226{literal}........

alors on obtient le message d'erreur suivant lors de l'affichage du lecteur:

Fig. 5: Erreur #2048: le fichier liste.xml n'est pas trouvé

...et la liste est vide.

Pour contourner le problème, il suffit d'utiliser une tâche cron qui lancera un exécutable tous les quarts d'heures ou toutes les demi-heures.

Contenu de l'exécutable creationPlaylist.

Voici un exemple de contenu du fichier creationPlaylist.txt:

#!/bin/bash
cd /usr/local/www/design/plain_site/flashPlayer/
rm -f liste*.xml
wget http://monsite.com/index.php/plain_site/layout/set/xml/content/view/videolist/226 -O liste.xml
chown www-data:www-data liste.xml

Explications:

ligne 2: le système se place dans le répertoire où doit être sauvegardé le fichier liste.xml
ligne 3: le système efface les fichiers commençant par liste et se terminant par l'extension .xml
ligne 4: le système télécharge la page http://linuxorable.fr/congo5/index.php/mae/layout/set/xml/content/view/videolist/226 et l'enregistre sous le nom liste.xml
ligne 5: le système attribut au fichier liste.xml le user www-data et le groupe www-data (par défaut le user et le groupe sont root et root).

Le fichier creationPlaylist.txt devant être exécutable, lancer la commande suivante:

chmod +x creationPlaylist.txt

Créer la tâche cron

En tant que root, éditer la liste des tâches cron liées à l'utilisateur www-data:

crontab -u www-data -e

...puis ajouter cette ligne au fichier (vous êtes alors dans un environnement Vim):

*/20 * * * *    /usr/local/www/monsite.com/creationPlaylist.txt

Cette ligne indique au système d'exécuter le script creationPlaylist.txt toutes les 20 minutes.

:
Le fichier xml ne sera pas valide si le système de débugage est activé car alors le code source des lignes de débugage seront incluses dans le code source du fichier xml.