Insérer une vidéo et Flash ?

[Fifi]

Bonjour,
J'utilise WYMeditor dans l'espace d'administration de plusieurs sites dynamiques. Je recherche un moyen d'insérer divers médias : vidéo et animation Flash.
Comment l'administrateur d'un site peut-il insérer une vidéo depuis Dailymotion ou Youtube, par exemple ?
De même, comment peut-il insérer une animation Flash ?

Merci de votre aide.

[jfh]

Bonjour,
Ceci devrait aider:
http://trac.wymeditor.org/trac/wiki/Dev ... videosmp3s

[Fifi]

Merci de ton aide,
j'ai fait un essai... Si j'ai bien traduit...
1- J'ai créé un répertoire dans lequel j'ai mis un fichier mavideo.flv et une image mavideo.jpg
2- J'insère l'image mavideo.jpg dans le contenu.
3- Jquery est sensé remplacé automatiquement l'image par la vidéo avec le code nécessaire...
ça ne marche pas

Y a-t-il du code à modifier ou à rajouter ? Si oui, quel code et où ?
Merci encore.

[jfh]

Oui, il y a du code JS à ajouter en frontend, par exemple en utilisant:
http://jquery.lukelutman.com/plugins/flash/

[Fifi]

Merci encore... mais, heu comment dire... mes connaissances en javascript sont très très limitées... Et j'ai beaucoup de mal avec les anglicismes... Qu'entends-tu par "frontend" ?
Donc, voilà ce que j'ai fait :
1- J'ai copié intégralement le code source donné ICI dans le fichier jquery.js (à la fin)
2- J'ai recopié les codes des exemples d'insertion d'objet Flash ou de vidéo Youtube dans ma page HTML :

Code: Select all

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#example').flash(
        { src: 'flash/agence.swf',
          width: 720,
          height: 126 },
        { version: 8 }
    );
});

$(document).ready(function(){
    $('a[@href^="http://youtube.com"]').flash(
        { height: 370, width: 450 },
        { version: 8 },
        function(htmlOptions) {
            $this = $(this);
            htmlOptions.src = $this.attr('href');
            $this.before($.fn.flash.transform(htmlOptions));                  
        }
    );
});
</script>

3- J'ajoute le code correspondant à une animation flash et à une vidéo Youtube dans ma page, comme indiqué sur les exemples :

Code: Select all

<div id="example"></div>
<p><a href="http://fr.youtube.com/v/8nm_mv0Nduc">My great YouTube video</a></p>

Seule l'animation Flash fonctionne. Pour la vidéo, je n'ai que le lien vers la page de Youtube...
voir la page test.

Si je veux faire la même chose avec une vidéo Dailymotion, j'imagine que je reprends le même code et je remplace

Code: Select all

$('a[@href^="http://youtube.com"]').flash(


par

Code: Select all

$('a[@href^="http://dailymotion.com"]').flash(

[Fifi]

Je me permets une petite relance... désolé, je n'ai toujours pas résolu le problème...

[gtraxx]

Heuu déjà utilise jquery originel sans y toucher.
Je te conseil ce plugin : http://malsup.com/jquery/media/ qui à fais c'est preuve et régulièrement mis à jour suivant les versions de jquery.
Ensuite tu copie le fichier jquery.media.js dans ton repertoire, tu le lie a ton html c'est plus propre.
Tu peux alors utilisez les exemples présenter sur le site,
si tu n'y arrive tjrs pas avec cela je t'aiderai mais uniquement avec ce plugin que je connais parfaitement
amicalement,
g-traxx

[Fifi]

Merci bien gtraxx,

J'ai donc fait ce que tu m'as conseillé, j'ai dû ajouter le plugin jquery.metadata.js (qui gère les tailles des médias, entre autre).
Voici la page d'essai.
Lorsque j'édite manuellement le code, pas de problème pour le SWF et YOUTUBE. Ça ne marche pas avec DAILYMOTION.
Par contre, si je veux le faire via WYMeditor, seul le SWF fonctionne, et encore, le plugin impose les dimensions de l'animation à 400px x 400px.
Je ne vois pas comment éditer les paramètres width et height ...
Donc il me reste encore quelques questions...

Manuellement, pourquoi cela ne fonctionne pas avec Dailymotion ?

Avec WYMeditor, les vidéos Youtube et Dailymotion ne s'affichent pas si je ne précise pas les dimensions de la fenêtre et le plugin impose par défaut 400px x 400 px pour les animations Flash.
Comment gérer les dimensions avec WYMeditor ? Et l'insertion d'animation Flash de taille variable ? Pas question, évidemment, de saisir directement dans le code, l'outil sera utilisé par une personne n'y connaissant strictement rien.

Merci encore de ton aide !

[gtraxx]

Procédons par étape, les vidéo DAILYMOTION ne fonctionne pas tout simplement parce que le plugin n'est pas encore prévu pour cela.
Pour ce qui est de la taille test d'abord avec une taille fixe dans ton code afin d'insérer un youtube fonctionnelle.
genre :

Code: Select all

jQuery(document).ready(function() {
         jQuery('a.media').media({ width: 400, height: 320, autoplay: false } );
      });


Code: Select all

<a class="media" "href="http://youtube.com/v/TyvN59L4hJU">Youtube Video</a>


PS: je ne vois pas ton test local, place le sur un serveur pour que j'y jette un oeil et utilise firebug

[Fifi]

Arf ! Elle est bien bonne celle-là... J'ai mis le lien en local... Grosse fatigue là !!
Voici la page test

Pour Dailymotion, est-ce en cours de développement ?

[gtraxx]

normal que cela ne fonctionne pas regarde convenablement ton code source, ta page n'est pas bien encodé tu travail en utf-8 ???
pour dailymotion je vais demander au dev si c prevu rapidement , je vais regarder dans ma svn et je te tiens au courant

[Fifi]

ta page n'est pas bien encodé tu travail en utf-8 ???

Ben non, le fichier est encodé en ISO-8859-1, c'est peut-être parce que j'ai fait des modifications avec le bloc-note ?

[gtraxx]

Bon j'ai trouver ce qui n'allais pas remplace :

Code: Select all

<script type="text/javascript">
$(function() {
$('a.media').media();
});
jQuery(document).ready(function() {
jQuery('a.media').media({ width: 400, height: 320, autoplay: false } );
});
</script>

Par ceci :

Code: Select all

<script type="text/javascript">
   $(document).ready(function() {
    $('a.media').media({ width: 400, height: 320, autoplay: false ,type:'swf'} );
      });
</script>

PS: firebug est ton ami

[Fifi]

OK, merci encore. Ça marche, cette fois-ci.

PS: firebug est ton ami

Peut-être, oui, je ne connaissais pas, je viens de l'installer. Après y avoir jeter un coup d'œil, je pense qu'il me faudra un certain temps pour tout comprendre ce qu'il fait...

Il reste encore quelques questions... pour comprendre comment ça marche

1- Quelle est la différence entre ce code (donné dans le lien JQuery Media Plugin)

Code: Select all

$(function() {
    $('a.media').media({ width: 400, height: 320, autoplay: false, type:'swf'});
    });

Et le code que tu m'as fourni ?

Code: Select all

$(document).ready(function() {
    $('a.media').media({ width: 400, height: 320, autoplay: false, type:'swf'});
      });

Les deux fonctionnent...

2- Je croyais que le plugin remplaçait le code <a class="media"... par le code d'insertion habituel <object> et tout le toutim... Lorsque je regarde le code source de la page, ce n'est pas le cas. J'aimerai comprendre comment ça marche !

3- Reste la question la plus importante, pour moi en tout cas. Comment (si c'est possible) gérer la taille des animations Flash insérées via WYMeditor ?
Par exemple, le bandeau Flash "Agence culturelle" devrait être en 856px de large sur 126px de haut.
Avec le code tapé directement (en bas encadré en rouge), mon anim' fait 856px de haut sur 400px de large... Il y a donc un souci, au moins avec ma largeur mise comme hauteur...

Toujours et encore merci de ton attention.

[Fifi]

...J'ai compris une petite partie du fonctionnement...J'ai créé une autre class "flash" pour mon animation flash avec le script supplémentaire suivant :

Code: Select all

$(document).ready(function() {
    $('a.flash').media({ width: 856, height: 126, autoplay: false, type:'swf'});
      });

et l'insertion de l'animation flash via WYMeditor :

Code: Select all

<a class="flash" href="agence.swf">SWF</a>

je parviens à mettre mon animation aux bonnes dimensions. C'est déjà ça... mais il me reste encore quelques questions en suspend.