Insertion d’une vidéo : WP me mélange mon code :o (Créer un compte)

  • Statut : non résolu
  • Ce sujet contient 34 réponses, 7 participants et a été mis à jour pour la dernière fois par Rmatt, le il y a 13 années.
15 sujets de 16 à 30 (sur un total de 35)
  • Auteur
    Messages
  • #600684
    albaran
    Participant
    Chevalier WordPress
    137 contributions

    Rod: effectivement l’introduction directe du code d’affichage est très compliquée.

    WP 2.2 incorpore bien jQuery ? J’ai fait une recherche sur le Web mais je n’ai pas trouvé comment installer le jQuery Flash Plugin. Un petit tuto pour les nuls serait bienvenu ! Quoi installer, à partir d’ou et vers ou. Merci d’avance.

    #600685
    Rod
    Membre
    Maître WordPress
    744 contributions

    C’est simple.

    Tu récupères l’url de l’admin de Jquery

    Ensuite, télécharger et installer sur votre serveur http://jquery.lukelutman.com/plugins/flash/jquery.flash.js

    (je vous invite cependant à vous créer dans votre racine WP un dossier /js/ et de recopier votre Jquery de l’admin, ne mélangeons pas les possibilités d’avenir coté client et coté admin)

    Donc je me retrouve avec 2 fichiers dans une racine contenant un nouveau dossier /js/

    avec

    jquery.js (disponible donc a http://www.jquery.com > taille 19 ko)
    jquery_flash.js (renommez tjs avec jquery_ : ca devient super pratique quand on a plusieurs plugins)

    inserez ces JS dans le header.php

    Juste en dessous, inserez ceci :

    $(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));						
            }
        );
    });

    et … c’est tout !!! 🙂

    tout lien youtube trouvé … example :

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam metus. Suspendisse consequat placerat felis. Nullam sagittis sem ac leo. Vivamus congue viverra pede. Nam nulla dui, aliquet id, rutrum eu, vulputate at, magna. Curabitur pede mauris, hendrerit eget, scelerisque ac, hendrerit nec, nulla. Phasellus ut nibh. In nec nisi. Morbi nonummy imperdiet velit. Cras convallis, eros id ornare facilisis, turpis felis iaculis turpis, sit amet interdum ante nunc eu est. Aliquam odio libero, sodales sit amet, lacinia id, scelerisque in, justo. Ut neque. Quisque metus. Praesent condimentum. Vestibulum aliquet egestas risus.</p>
    
    <p><a href="http://www.youtube.com/v/rFY1AF4r3Ts">My great YouTube video</a></p>
    
    <p>Aliquam ut dolor. Integer risus. Sed iaculis dui ut mauris. Nullam sagittis aliquam neque. Fusce purus lorem, cursus ut, sodales blandit, facilisis nec, nunc. Pellentesque enim neque, lobortis vel, pretium sed, aliquet eget, nunc. Maecenas dignissim ultricies orci. Donec et ligula. Suspendisse potenti. Vestibulum eu erat eu erat nonummy feugiat. Quisque mattis, sapien ut lobortis congue, leo ante eleifend orci, a placerat velit arcu vel tellus. Praesent bibendum laoreet leo. </p>

    Votre lien Youtube sera transformé direct en VIDEO 🙂 franchement, c’est pas du joli code ca ?! 🙂)

    Idem pour les mp3 …

    Insérez

    $(document).ready(function(){
        $(‘a[@href$=”.mp3″]’).flash(
            { src: ‘singlemp3player.swf’, height: 20, width: 100 },
            { version: 7 },
            function(htmlOptions) {
                $this = $(this);
                htmlOptions.flashvars.file = $this.attr(‘href’);
                $this.before($.fn.flash.transform(htmlOptions));						
            }
        );
    });

    tjs dans header

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam metus. Suspendisse consequat placerat felis. Nullam sagittis sem ac leo. Vivamus congue viverra pede. Nam nulla dui, aliquet id, rutrum eu, vulputate at, magna. Curabitur pede mauris, hendrerit eget, scelerisque ac, hendrerit nec, nulla. Phasellus ut nibh. In nec nisi. Morbi nonummy imperdiet velit. Cras convallis, eros id ornare facilisis, turpis felis iaculis turpis, sit amet interdum ante nunc eu est. Aliquam odio libero, sodales sit amet, lacinia id, scelerisque in, justo. Ut neque. Quisque metus. Praesent condimentum. Vestibulum aliquet egestas risus.</p>
    
    <p><a href="sound.mp3">sound.mp3</a></p>
    
    <p>Aliquam ut dolor. Integer risus. Sed iaculis dui ut mauris. Nullam sagittis aliquam neque. Fusce purus lorem, cursus ut, sodales blandit, facilisis nec, nunc. Pellentesque enim neque, lobortis vel, pretium sed, aliquet eget, nunc. Maecenas dignissim ultricies orci. Donec et ligula. Suspendisse potenti. Vestibulum eu erat eu erat nonummy feugiat. Quisque mattis, sapien ut lobortis congue, leo ante eleifend orci, a placerat velit arcu vel tellus. Praesent bibendum laoreet leo. </p>

    Bien sur il faut indiquer le chemin du lecteur flash utilisé … mais on remarquera un truc fabuleux : il suffit de changer les variables dans le code Javascript du header pour que ca affecte en 1 fois l’apparence de tous les lecteurs … et cette astuce s’avere donc PARFAITE pour le Podcast … pas beau la vie ? 🙂

    Modération : Utilisation des balises BBcode pour y voir plus clair. 😉

    #600686
    yazerty
    Membre
    Chevalier WordPress
    158 contributions

    My great YouTube video

    Ca transforme “My great YouTube video” en lien vers la page Youtube (en plus d’afficher le lecteur vidéo) ?

    { height: 370, width: 450 },

    Donc on ne peut pas avoir des lecteur de taille différente (le plugin Embedded Video Link gère les différentes tailles de vidéos des différentes plateformes : tu lui spécifie une largeur et il te sort la bonne hauteur en fonction du service de vidéo – Youtube, Daily, Metacafé, …) ?

    #600687
    benkenobi
    Gestionnaire du forum
    Maître WordPress
    4079 contributions

    Rod > Par contre il faut mettre autant de fois le code qu’il y a de sites/lecteur (YouTube, DailyMotion, MP3, divers formats audio et vidéo, etc.) ??

    #600688
    albaran
    Participant
    Chevalier WordPress
    137 contributions

    Rod: ça marche avec le mp3player.swf de http://www.jeroenwijering.com/?item=Flash_Single_MP3_Player
    mais pas avec le player de neolao

    voici le texte rajouté dans header.php

    
    
    
    <!--
    $(document).ready(function(){
    $('a[@href$="mp3"]').flash(
    	{ src: '/blog/uploads/mp3player.swf', height: 20, width: 200 },
    	{ version: 7 },
    	function(htmlOptions) {
    		$this = $(this);
    		htmlOptions.flashvars.file = $this.attr('href');
    		$this.before($.fn.flash.transform(htmlOptions));                       
    	}
    );
    });
    -->

    #600689
    albaran
    Participant
    Chevalier WordPress
    137 contributions

    Bug ! il transforme aussi l’adresse suivante dans la blogoliste et affiche le player

    <li><a href="http://resources.neolao.com/flash/components/player_mp3" title="neolao @ http://portfolio.neolao.com/">Lecteur mp3 de neolao</a></li>

    #600690
    albaran
    Participant
    Chevalier WordPress
    137 contributions

    pour corriger, il suffit de remplacer mp3 par .mp3 ; soit :

    $(‘a[@href$=”mp3″]’).flash(

    par

    $(‘a[@href$=”.mp3″]’).flash(

    #600691
    Rod
    Membre
    Maître WordPress
    744 contributions
    BenKenobi wrote:
    Rod > Par contre il faut mettre autant de fois le code qu’il y a de sites/lecteur (YouTube, DailyMotion, MP3, divers formats audio et vidéo, etc.) ??

    je ne sais pas, je serais tenté de dire oui … soit une fois la routine developpée, ne devrait pas depasser 3 ou 4 ko … et chargé une fois pour toute 🙂

    #600692
    Rod
    Membre
    Maître WordPress
    744 contributions
    yazerty wrote:

    My great YouTube video

    Ca transforme “My great YouTube video” en lien vers la page Youtube (en plus d’afficher le lecteur vidéo) ?

    { height: 370, width: 450 },

    Donc on ne peut pas avoir des lecteur de taille différente (le plugin Embedded Video Link gère les différentes tailles de vidéos des différentes plateformes : tu lui spécifie une largeur et il te sort la bonne hauteur en fonction du service de vidéo – Youtube, Daily, Metacafé, …) ?

    Oui ca transforme en lien en + de la video

    Pour les lecteurs et la taille … il y a moyen de jouer en bidouillant le plugin : en s’y mettant à plusieurs, je pense que c’est jouable …

    l’idee serait carrement une gestion de classes (ca c facile avec Jquery), ou en fait on dit kun div youtube = 400px / 300px … et k’en coordonnées dans le plugin, on mette 100% et 100% … en mettant systematiquement 100% dans le flash, il suffit de creer xxx classes en fonction des lecteurs (youtube : 400×300, Dailymotion 320×240 … et ainsi de suite)

    Enfin, je rappelle que cette solution n’est pas la solution ultime, mais qui permet d’implanter de maniere vraiment simple, rapide et efficace, dans un code xhtml 100% parfait, une video youtube ou un mp3 : ceci dit, si ca fonctionne avec le lecteur de Jeroen, ca veut donc dire ke la gestion des FLV en local se fera avec la meme facilité.

    #600693
    Rmatt
    Membre
    Padawan WordPress
    73 contributions

    Salut Rod, j’ai visiblement des problèmes pour activer le jQuery chez moi….
    Tu pourrais jeter un coup d’oeil à ma page pour me dire ce qui va pas… ca doit être un truc de boulet…
    Merci d’avance

    #600694
    Rmatt
    Membre
    Padawan WordPress
    73 contributions

    Au passage, quelqu’un d’autre que Rod peut répondre, pas de pb 😉

    Je tiens aussi à signaler que j’ai également essayé le jQuery avec le thème Default (sans oublier de l’incorporer !) et ça ne marche toujours pas, ainsi que sous FF2 et IE7

    #600695
    Rod
    Membre
    Maître WordPress
    744 contributions

    alors a mon avis, t’as un mega bug de conflit entre Prototype et Jquery : la preuve, meme ton appel flickR ne fonctionne pas … je pense que c’est ton plugin INAP qui est en cause 🙂

    #600696
    Rmatt
    Membre
    Padawan WordPress
    73 contributions

    J’y avais pensé aussi, mais même en désactivant INAP, ce que j’ai fait là et laissé désactiver, il y a le même souci…
    Je penche également pour un conflit quelque part, mais je ne trouve pas où :(

    #600697
    Rmatt
    Membre
    Padawan WordPress
    73 contributions

    Booouuuuh ! Personne n’a de solution pour moi….

    Entre temps, j’ai essayé diverses manips comme mettre en commentaire le code de jQuery, puis désactiver le plugin INAP, puis remettre le jQuery… Rien à faire….

    Mais je reste très ouvert à tout conseil !!!

    #600698
    yazerty
    Membre
    Chevalier WordPress
    158 contributions

    Rmatt > tu as essayé un plugin d’insertion, genre “Embedded Video with link” ?

15 sujets de 16 à 30 (sur un total de 35)
  • Vous devez être connecté pour répondre à ce sujet.