SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

289 Plugins, 197 contribs sur SPIP-Zone, 156 visiteurs en ce moment

Accueil > Rédaction > Documents pour rédaction > oEmbed > oEmbed

oEmbed

4 décembre 2013 – par b_b, Cerdic – 137 commentaires

39 votes

C’est quoi ce truc ?

oEmbed est un protocole ouvert qui permet d’insérer le contenu d’une page web dans une autre page. Le contenu inséré peut être de plusieurs types : photo, vidéo, URL ou extrait HTML.

L’échange d’information a lieu entre un site client et un site serveur. Par exemple, le site client peut afficher une représentation d’une page web telle qu’une image ou une vidéo. Le serveur doit disposer d’un service utilisant l’API oEmbed pour permettre aux clients de récupérer les informations de la représentation à afficher.

Comment ça marche ?

Du côté client, l’utilisation du plugin est simple. Par défaut le plugin transforme automatiquement :

  • les URL entre < et > n’importe où dans le texte : <https://www.flickr.com/photos/romytetue/4651342894/>
  • les URL toutes seules dans un paragraphe : deux retours à la ligne, URL, puis deux retours à la ligne.

Si le site vers lequel pointe l’URL implémente l’API oEmbed, celle-ci est complétée par un extrait du contenu fourni par le site. Par exemple, si on insère l’URL suivante dans le texte d’un article :

https://www.flickr.com/photos/romytetue/4651342894/

Celle-ci sera automatiquement remplacée par le contenu suivant :

L'estafette SPIP

Avec SPIP 3, le plugin insère aussi ces traitements dans le formulaire d’ajout de documents de SPIP (dans la partie documents distants). Il suffit d’ajouter un document distant dont l’URL est celle de la page où se trouve le contenu à récupérer. Voir la vidéo ci-dessous pour une petite démonstration.

http://medias.spip.net/medias/r-d/plugins/multimedia/article/demo-du-plugin-oembed

Une fois le document ajouté, vous pouvez l’insérer dans le contenu de votre article comme n’importe quel document.

  • si le document est une image, vous pouvez l’insérer avec le raccourci <imgXX>
  • si le document est une vidéo, vous pouvez l’insérer avec le raccourci <embXX>

Et je peux faire ça avec n’importe quel site ?

Non, pour des raisons de sécurité le plugin utilise une liste blanche de sites autorisées. Par défaut, cette liste contient les sites suivants : youtube, blip.tv, vimeo, dailymotion, flickr, soundcloud, slideshare, yfrog, instagram, rdio, huffduffer, nfb, dotsub, clikthrough, kinomap, photobucket, smugmug, meetup, wordpress, blogs.cnn, techcrunch, my.opera, viddler et collegehumor (consulter la liste complète).

Pour ajouter un nouveau site serveur (ou provider) à la liste blanche il vous faudra deux informations :

  • scheme : schéma d’URL correspondant au site (vous pouvez utiliser * comme wildcard)
  • endpoint : URL à laquelle le service oEmbed du site est disponible

Par exemple, pour ajouter le site deviantART à la liste blanche il suffit d’ajouter un provider avec les paramètres suivants :

  • scheme : http://*.deviantart.com/art/*
  • endpoint : http://backend.deviantart.com/oembed

L’ajout peut se faire à l’aide du pipeline oembed_lister_providers ou en personnalisant le contenu de la variable globale $GLOBALS['oembed_providers'].

Par exemple, dans un plugin de préfixe monplugin en déclarant le pipeline suivant dans plugins/monplugin/monplugins_pipelines.php :

  1. function monplugin_oembed_lister_providers($providers){
  2.  
  3. $providers['http://*.deviantart.com/art/*'] = 'http://backend.deviantart.com/oembed';
  4.  
  5. return $providers;
  6. }

Télécharger

Ou sans utiliser de plugin, directement dans votre fichier config/mes_options.php :

  1. $GLOBALS['oembed_providers'] = array(
  2. 'http://*.deviantart.com/art/*' => 'http://backend.deviantart.com/oembed',
  3. );

Télécharger

Voici une liste non exhaustive de providers supplémentaires au format JSON.

Traitements automatiques

La page de configuration vous permet aussi de paramétrer les automatismes du plugin :

  • largeur/hauteur par défaut des blocs d’embed
  • activer/désactiver la transformation automatique des URLs dans le texte : cela concerne les URLs toutes seules dans un paragraphes, car les URLs entre < et > seront toujours converties ;
  • activer/désactiver la détection automatique des providers sans tenir compte de la liste blanche (attention aux failles XSS).

Fonctions de post-traitement

Il est possible de déclarer des fonctions de post-traitement qui agiront sur les données renvoyées par le site source (ou provider). Le nommage de ces fonctions suit la convention suivante oembed_posttraite_{$provider_name}_$type[_dist] afin de permettre de déclarer un post-traitement en fonction de la source de données.

Par exemple, le plugin fournit une fonction de post-traitement pour soundcloud :

  1. function oembed_input_posttraite_soundcloud_rich_dist($data){
  2.  
  3. $data['media'] = 'sound';
  4. $data['html'] = preg_replace(",width=['\"][0-9]+['\"],i",'width="100%"',$data['html']);
  5.  
  6. if (!isset($data['thumbnail_url'])){
  7. $data['thumbnail_url'] = find_in_path("oembed/input/vignettes/soundcloud.png");
  8. }
  9.  
  10. return $data;
  11. }

Télécharger

Cette fonction définit que le contenu renvoyé est du son, puis elle modifie la largeur du lecteur audio, et pour finir elle définit une vignette par défaut si celle-ci n’est pas présente.

Voir la source sur la zone.

Côté serveur

Le plugin ajoute des liens de déclaration oEmbed dans l’entête des pages du site. Ces liens permettent aux autres sites de découvrir que votre site est « compatible » oEmbed et qu’il peut donc être utilisé en tant que fournisseur de contenu (ou provider).

Les paramètres à fournir pour permettre à un autre site d’ajouter le votre à sa liste blanche de providers sont les suivants :

Pour que l’adresse du service fonctionne il faut avoir activé le fichier .htaccess fourni par défaut dans SPIP.

Le contenu renvoyé lors d’une requête oembed est généré par les squelettes situés dans le répertoire plugins/oembed/oembed/output/modeles. Ces squelettes sont personnalisables, vous pouvez y insérer des boucles et balises afin de renvoyer le code d’embed d’un document audio/vidéo, une image tirée du portfolio d’un article, etc.

Par exemple, pour une requête depuis l’URL http://contrib.spip.net/GIS-4 le contenu renvoyé est le suivant :

{
   "version": "1.0",
   "type": "rich",
   "provider_name": "SPIP-Contrib",
   "provider_url": "http://contrib.spip.net",
   "title": "GIS 4",
   "author_name": "b_b",
   "width": "480",
   "height": "295",
   "url": "http://contrib.spip.net/GIS-4",
   "html": "<h4 class='title'><a href='http://contrib.spip.net/GIS-4'>GIS 4</a></h4><blockquote class='spip'>\n<p>Présentation et nouveautés <br class='autobr' />\nLa version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles fonctions.<br class='autobr' />\nCette nouvelle version de GIS permet d’utiliser différents fonds de carte sans avoir à charger des scripts externes, seuls les scripts locaux de Leaflet et des plugins nécessaires sont chargés dans vos pages. À ce jour, le plugin propose plus de&amp;amp;amp;amp;nbsp;(...)</p>\n</blockquote>\n"
}

Voir le code en ligne.

Et voici ce que donne l’affichage depuis le site SPIP client :

Voir en ligne : http://plugins.spip.net/oembed

Dernière modification de cette page le 4 juillet 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 18 décembre 2017 à 19:12, par philooo En réponse à : oEmbed

    j’ai un truc etrange quand j’insere via Oembed, le code source de ma page contient une balise qui ne devrait pas etre la, genre :

    { <html><figure  class=’spip_documents spip_documents_center ressource

    est ce que quelqu’un a deja eu ce problems ? debalise HTML qui s’insere de facon bizarre ?

    pour info je suis en version SPIP 3.2 et dernier plugin oEmbed.

    • Le 4 janvier à 02:33, par goony En réponse à : oEmbed

      En effet, le plugin semble intentionellement inserer son code dans un tag « html », qui ne passe pas la validation w3c. Quelle est la raison pour utiliser ce tag ?

    • Le 4 janvier à 11:02, par b_b En réponse à : oEmbed

      Salut, comme in peut le voir dans le bloc « Dernières modifications » de cette page, cela vient de cette révision :

      https://zone.spip.org/trac/spip-zone/changeset/107159

      Le plugin passe en version 2 avec modification du HTML genere qui passe en < figure> au lieu de < div> dans le modele principal modeles/oembed.html. Cette evolution se fait avec un minimum d’impact : les classes ne changent pas, ce qui evite de perturber les affichages sur les sites existants, et en cas de surcharge existante d’un sous modele on perd juste le < figcaption> et le lien vers la source, mais en principe le HTML reste valide

      En résumé, le plugin utilise des balises HTML5 à partir de la version 2. Cela pose problème pour les sites qui sont encore en XHTML et non en HTML5, car insérer du XHTML dans du HTML5 est valide, mais pas l’inverse. En conclusion, restez sur la version 1 si votre site n’est pas en HTML5.

    • Le 4 janvier à 11:25, par Cerdic En réponse à : oEmbed

      la balise <html> est un raccourci de SPIP qui indique que ce qui suit ne doit pas être modifié par le moteur de raccourcis de SPIP. Cette balise est supprimée par le passage dans propre() et n’apparait normalement pas in fine

    • Le 8 janvier à 09:40, par goony En réponse à : oEmbed

      Pour philooo et moi-meme le filtre propre() ne semble pas s’appliquer, ou alors pas a la bonne etape. En tous cas on a toujours les balises « html » dans nos pages finales. J’ai essaye de remonter a la source pour voir la raison mais c’est assez complique le code a ce niveau.

    Répondre à ce message

  • Le 29 novembre 2017 à 16:50, par nicod_ En réponse à : oEmbed

    Pour info, les embed Twitter et Mastodon ne sont plus compatibles SPIP 3.0 (à cause de recuperer_url).

    • Le 14 décembre 2017 à 20:58, par philooo En réponse à : oEmbed

      pour info, je viens de tester, 14 decembre 2017, avec mon install 3.2 et la derniere version du plugin, youtube et twitter marche comme il se doit

    • Le 14 décembre 2017 à 21:02, par nicod_ En réponse à : oEmbed

      Je parlais bien de SPIP 3.0, pas 3.2.

    Répondre à ce message

  • Le 25 octobre 2017 à 19:24, par emma En réponse à : oEmbed

    franchement, merci ! c’est parfait !

    juste un petit soucis de style pour le sous titre (figcaption) qui va me chercher un truc (style=width:120px ;) que je me demande où il a bien pu trouver ça !

    en attendant, pour l’affichage public, je lui ai demandé de ne pas s’afficher ... reste à voir les conséquences car ce sont des class SPIP (.spip_doc_caption .spip_doc_titre) si quelqu’un a une idée ...

    Répondre à ce message

  • Le 11 octobre 2017 à 14:19, par ari En réponse à : oEmbed

    Bonjour,

    je teste l’intégration de ce super plugin, mais je n’arrive pas à afficher les images incluses dans des tweets. Seul le lien vers l’image s’affiche (ainsi que le reste du tweet).

    J’ai vérifié sur http://oembed.nursit.com, mais l’inclusion de tweets n’y fonctionne plus.

    Une idée de piste ? Merci !

    • Le 12 octobre 2017 à 21:02, par Cerdic En réponse à : oEmbed

      C’est pas un bug c’est une feature : on a choisit de ne surtout pas afficher l’iframe que twitter envoie car c’est un vrai mouchard et une plaie en performance.
      Du coup on affiche en blockquote le contenu texte du tweet, mais on a pas de metadata pour afficher l’image.

      Cela dit la version 1.9.0 du plugin ruse pour récuperer l’information de l’image principale du tweet dans le HTML de son URL et l’afficher en tête du blockquote comme dans la twitter card.
      Je ne suis pas sur que ce sera robuste dans le temps car on ne maitrise pas ce que fait twitter et ça n’affiche qu’une image même si le tweet en avait plusieurs, mais c’est une amélioration :)

    • Le 13 octobre 2017 à 14:16, par ari En réponse à : oEmbed

      Trop bien, merci ! La récupération d’image fonctionne nickel.

    • Le 16 octobre 2017 à 11:16, par RastaPopoulos En réponse à : oEmbed

      Hello Cédric, l’autre jour tu me parlais effectivement de « iframe » mais du coup je suis allé voir la documentation, et apparemment ce n’est plus le cas.
      https://developer.twitter.com/en/docs/tweets/post-and-engage/api-reference/get-statuses-oembed

      Si tu vas sur
      https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FInterior%2Fstatus%2F507185938620219395

      Dans « html » tu reçois désormais directement un « blockquote » avec un JS (mais le JS peut être désactivé avec une option lors de l’appel).

      Donc leur code a-t-il changé depuis que tu as codé la récupération dans le plugin ? Et si ça n’utilise plus d’iframe, il faudrait plutôt repasser sur leur code officiel généré par défaut, pour être plus robuste et pérenne, non ? Surtout que leur serveur oembed gère pour tweet unique mais pour tout et n’importe quoi aussi (timeline complète, fiche utilisateur, etc, etc).

    • Le 16 octobre 2017 à 11:50, par Cerdic En réponse à : oEmbed

      Non en effet c’est un JS chez twitter, pas une iframe, mais le principe est le même : on le vire pour ne garder que le blockquote statique, qui lui ne contient pas d’image. Mais j’ai amélioré le plugin pour récupérer l’image principale du tweet si il y en a une et l’afficher comme dans la card générée par le JS de twitter

    • Le 16 octobre 2017 à 12:55, par RastaPopoulos En réponse à : oEmbed

      Ah ok je comprends mieux, je pensais que précédemment ils envoyaient une iframe et que donc tu avais fait un code proxy pour générer autre chose, mais qu’entre temps ils avaient changé ce qu’ils envoyaient. Donc là les images etc chez eux sont de toute façon récupéré en JS avec une requête supplémentaire ? Du coup ça ne change pas grand chose pour ça. Mais par contre oui pour la pérennité on ne sait pas si ça continuera toujours à bien la trouver par rapport à ce qu’ils font eux.

      Je ne sais pas si quelqu’un a déjà réussi à faire un reverse du JS pour en proposer une version sans mouchardage, un truc comme ça… Même pas sûr que ce soit possible.

    Répondre à ce message

  • Le 4 juillet 2017 à 14:08, par kent1 En réponse à : oEmbed

    Dans la dernière version (1.8.8), j’ai pas mal amélioré l’intégration de vidéos Facebook notamment.

    Juste un petit message pour être notifié des fois que

    • Le 5 juillet 2017 à 09:18, par b_b En réponse à : oEmbed

      Vu, merci mignon :)

    Répondre à ce message

  • Le 24 juin 2017 à 09:24, par M.B. En réponse à : oEmbed

    je n’obtiens que ce message :

    Le fichier distant http://www.flickr.com/photos/dan1977/5087662622/ n’a pas pu être trouvé

    • Le 25 juin 2017 à 19:47, par b_b En réponse à : oEmbed

      Oui, la photo citée en exemple n’était plus disponible sur flickr, je viens de la remplacer par une autre, merci pour le signalement.

    Répondre à ce message

  • Le 7 avril 2017 à 13:27, par DavidM En réponse à : oEmbed

    Bjr,
    Sur un nouveau site, dans un article, mes vidéos (de Vimeo en l’occurence) avec Oembed s’affichent en taille réduite (252px522 px ou 630px environ suivant les cas !?, bizarre ces variations), alors que j’ai mis dans les paramètres Oembed 813px maxi (et ma page est large)

    j’ai tenté d’ajouter &maxwidth=813&maxheight=813 à mon url du « document » vidéo, mais ça ne change rien.

    Même chose aussi, sur un article spécial, où je liste toutes les vidéos avec un modèle qui utilise [(#MODELE{oembed,url=#OEMBED})], les vidéos elles restent petites avec là aussi x tailles différentes.

    J’ai spip 3.1, avec Aveline/Noisetier/Zpip, Oembed, tous les plugins à jour
    J’ai essayé de regarder dans les divers modèles de ces plugins, mais je n’ai rien trouvé qui puisse (apparemment) influer sur la largeur des vidéos.

    Merci pour tout conseil utile

    Répondre à ce message

  • Le 31 mars 2017 à 23:50, par Catherine En réponse à : oEmbed

    Bonjour ,

    est-il possible de masquer l’auteur ou le nom de la chaine pour une diffusion d’une vidéo de Youtube

    Merci

    • Le 1er avril 2017 à 11:21, par b_b En réponse à : oEmbed

      Salut, tu peux le faire en masquant le conteneur des cette info en css ou en le supprimant du modèle qui affiche les vidéo que tu auras surchargé dans ton dossier squelettes, cf :

      https://zone.spip.org/trac/spip-zone/browser/_plugins_/oembed/modeles/oembed_video.html#L15

    • Le 6 avril 2017 à 12:48, par Catherine En réponse à : oEmbed

      Merci , pour l’info mais quelle manipulation dois-je faire ?
      et quelle serait le nouveau fichier à intégrer dans plugin ...
      Merci d’avance une débutante en spip

    • Le 7 avril 2017 à 13:12, par DavidM En réponse à : oEmbed

      On peut mettre display : none pour les class ccs qui correpondent aux champs à ne pas afficher, exemple pour le nom :

      .oe-author_name {
              display: none;
      }
    • Le 7 avril 2017 à 22:16, par Catherine En réponse à : oEmbed

      Un grand merci cela fonctionne merveilleusement

      Merci

    Répondre à ce message

  • Le 17 février 2017 à 12:30, par DavidM En réponse à : oEmbed

    Bonjour,

    J’ai remarqué que sur mon site les vidéos Youtube ont une limite de largeur, avec max-width de 612px.
    Alors que pourtant j’ai réglé dans la page config du plugin Oembed (un plugin bien pratique !) une limite max de 840px, et que c’est bien 840px qui est pris pour les vidéos de Vimeo.

    je sais pas pourquoi ça passe à 612 pour les vidéos Youtube ?
    bug ou limitations liées à Youtube ?

    Pour preuve, extrait du code de oembed de ma vidéo : <div class="oembed oe-video async clearfix" style="max-width:612px;">

    Répondre à ce message

  • Le 20 novembre 2016 à 15:53, par Yohooo En réponse à : oEmbed

    Hello,

    Lorsque je copie un modele oembed dans mon répertoire squelette pour le modifier, je rencontre une erreur m’indiquant que le filtre Filtre oembed_recuperer_data est non défini.

    Quelqu’un pourrai m’indiquer pourquoi celui-ci ne marche pas dans ces circonstances ?

    ( pour info, je désire simplement supprimer le titre et le descriptif sous les vidéos et ajouter uniquement le titre au dessus des vidéos ).

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Article PDF

    9 juin 2007 – 364 commentaires

    Présentation d’un plugin fournissant une version PDF de l’article en cours

  • Slick

    17 mai 2017 – 17 commentaires

    Intégration à SPIP du carrousel Slick : https://kenwheeler.github.io/slick/ Fonctions de Slick Son utilisation permet d’afficher une liste d’éléments défilants, en l’occurrence ici une série de photographies. Par les configurations proposées, il est (...)

  • GIS 4

    11 août 2012 – 1438 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Réservation d’événements

    16 mars 2015 – 346 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification Facteur (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 819 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)