Insérer une vidéo dans une animation Edge

© Christian PAULUS. Document créé le 20 octobre 2011 , mis à jour le 20 octobre 2011.

Un problème sans solution est un problème mal posé. Albert Einstein

Accueil du site > Astuces > WEB > Insérer une vidéo dans une animation Edge

Multimédia / Adobe Edge Preview

Il est possible d’insérer une vidéo hébergée par YouTube sur son animation générée par Adobe Edge Preview en quelques copier-coller...

Lire avant tout ce premier billet Insérer un son dans une animation Edge, et si besoin, suivre l’exemple donné pour bien assimiler la démarche nécessaire.

Choisir sur YouTube la vidéo à publier sur votre site. Cliquer sur le bouton Partager, puis sur le bouton Intégrer. Youtube vous propose un bout de code à recopier sur votre site. Le copier.

Editer votre projet et créer une boite - un rectangle - de la même taille que la vidéo à afficher.

Y ajouter une action.

Dans la boite d’édition de l’action, recopier le code copié sur Youtube, puis enrober ce code de l’appel jQuery nécessaire.

Par exemple, pour cette vidéo 1984 (Macintosh, en hommage à Steve Jobs), le code proposé par YouTube :

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/-nz8WD6v-Jg?version=3&amp;hl=fr_FR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/-nz8WD6v-Jg?version=3&amp;hl=fr_FR" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

L’enrobage jQuery est un appel à la méthode append(). Cette méthode insére dans l’objet rectangle généré par Adobe Edge Preview le code d’accueil nécessaire à l’affichage de la vidéo. Ce qui nous donne au final :

$('#stage_Rectangle').append ('<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/-nz8WD6v-Jg?version=3&amp;hl=fr_FR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/-nz8WD6v-Jg?version=3&amp;hl=fr_FR" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>');

Et permet d’afficher votre bandeau, avec un bloc réservé pour la vidéo.

Image écran, exemple pour un lien YouTube inséré dans un bandeau Edge {PNG}

Plussoyez !

Les forums sont fermés.

  • Controler la video ??? 16 novembre 2011 17:20, par Nathan

    Super merci Christian,

    Serait-il possible de contrôler cette vidéo avec un bouton posé sur la scène ?

    désolé si j’abuse ;-)

    Les forums sont fermés.

    • Controler la video ??? 17 novembre 2011 12:36, par Christian PAULUS
      Oui. Il faut juste écrire le code JavasScript qui va bien.

      Les forums sont fermés.

      • Controler la video ??? 17 novembre 2011 16:36, par Nathan
        Bonjour Christian,
        C’est une bonne nouvelle, mais comme je ne suis par un tueur en code, je suis réalisateur ;-), je ne serais pas contre un peu d’aide…

        Les forums sont fermés.