Un plugin Media Player pour FCKEditor
vendredi 29 mai 2009, par Brice Favre
Je travaille actuellement à l’amélioration d’un CMS basé sur Copix. J’en reparlerais d’ailleurs dans un prochain billet qui est en cours d’écriture. L’essentiel du travail consiste à refondre et améliorer l’éditeur de page qui utilise FCKEditor.
On peut douter du bien fondé de l’utilisation de ce genre d’éditeur pour de l’édition de contenu. Dans le cadre du site en question il est utilisé de façon raisonné (pas de mise en page qui pête, des plugins qui ajoute des ponts vers le CMS)
Le point bloquant jusqu’à présent est le manque d’outil pour facilement :
Ajouter des flash
Ajouter des fichiers médias : AVI, mp3, flv.
Pour le premier point, bonne nouvelle, les dernières versions de FCKEditor le gère directement. Pour le deuxième point, il faut aller à la recherche d’un plugin.
Media Player pour FCK Editor
Avec mon meilleur ami sur le net, je suis donc parti à la recherche d’un plugins idoine. Le premier plugins que j’ai trouvé utilise FLVPlayer. A première vue il semble très intéressant, facile à mettre en place mais il souffre de quelques défauts.
Tout d’abord il y’a trop d’options. Couleurs de fond, hauteur, largeur, watermark, image de preview. Oui bien mais mes utilisateurs n’en demandent pas temps et je songe qu’ils seront vite perdus. L’autre poins assez contraignant est lié à la prévisualisation de l’emplacement du média dans l’éditeur. Il s’agit d’un simple div pas commode à modifier et surtout difficile à effacer. Ce qui achève le tout c’est qu’il m’est avéré impossible de lire un avi.
En cherchant un peu mieux, je suis tombé sur un petit plugin développé par le projet Jira. Au premier abord il ne paie pas de mine mais il a l’avantage de bien fonctionné. Le seule problème trouvé est qu’il ne gère pas les mp3. A que celà ne tienne, on va l’améliorer.
Pour quelques modifications en plus
Ce plugin utilise en fait un lecteur flash pour lire les fichiers FLV. J’ai donc été à la recherche d’un fichier identique pour lire les mp3 et je suis tombé sur le dewplayer que j’ai mis dans le répertoire de movieplayer.
Il m’a suffit donc d’ajouter un lien vers ce player dans le fichier movieplayer.js comme lecteur alternatif. J’en ai profité pour utilisé les variables de configuration.
- var flashPlayer = oEditor.FCKConfig.PluginsPath + "movieplayer/player_flv_maxi.swf";
- var flashPlayerAlt = oEditor.FCKConfig.PluginsPath + "movieplayer/dewplayer.swf";
En étudiant ensuite le code, j’ai remarqué que le système effectuait un contrôle sur le type de contenu envoyé. J’ai donc simplement repris le code présenté en exemple sur le site dewplayer et l’ai adapté pour l’insérer dans le plugin (A partir de la ligne 203) :
- }else if (this.contentType == "audio/mpeg"){
- this.autoplay = (this.autoplay == 'true' || this.autoplay == '1') ? 'true' : 'false';
- s += '<OBJECT id="movie' + rnd + '" ';
- s += ' type="application/x-shockwave-flash" ';
- s += ' data="'+ flashPlayerAlt +'?mp3='+this.url+'&autoplay='+this.autoplay+'" ';
- s += ' width="'+this.width+'" height="'+this.height+'" >';
- s += ' <PARAM name="movie" value="'+flashPlayerAlt+'?mp3='+ this.url +'" />';
- s += '</OBJECT>';
- }
Tout simplement, et ça marche.
Vous trouverez en attachement de ce post, une version packagée comprenant mes modifications. N’hésitez pas à me faire vos retours d’utilisations.
RSS 2.0