oEmbed

Publié le : 4 décembre 2013 – Dernière modification le 14 mars 2023 – par b_b, Cerdic – 245 commentaires

français, Português do Brasil
1
2
3
4
5
49 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
L'estafette SPIP
par tetue
https://www.flickr.com/photos/romytetue/4651342894/

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.

https://medias.spip.net/medias/r-d/plugins-26/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 :

function monplugin_oembed_lister_providers($providers){

	$providers['http://*.deviantart.com/art/*'] = 'http://backend.deviantart.com/oembed';

	return $providers;
}

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

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

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).
  • désactiver l’insertion des entêtes qui déclarent le site comme provider

Youtube

Pour les vidéos issues de Youtube, le plugin ajoute automatiquement deux options :

  • pour ne pas lister les vidéos liées en fin de lecture
  • les vidéos sont intégrées depuis le nom de domaine youtube-nocookies.com pour ne pas déposer de cookies supplémentaires à l’internaute (respect de la vie privée).

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 :

function oembed_input_posttraite_soundcloud_rich_dist($data){

	$data['media'] = 'sound';
	$data['html'] = preg_replace(",width=['\"][0-9]+['\"],i",'width="100%"',$data['html']);

	if (!isset($data['thumbnail_url'])){
		$data['thumbnail_url'] = find_in_path("oembed/input/vignettes/soundcloud.png");
	}

	return $data;
}

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 spip-contrib-extensions/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 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": "[->4189]",
    "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 :

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

67 discussions

  • 6
    DavidM

    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

  • 4
    Catherine

    Bonjour ,

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

    Merci

    Répondre à ce message

  • 2
    DavidM

    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

  • 2
    Yohooo

    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

  • 14
    erational

    une petite astuce pour utiliser oEmbed dans vos squelettes.
    Par exemple vous avez un champs url_video qui stocke l’URL des vidéos.

    Pour rendre la vidéo, depuis une page, on pourra alors utiliser le modèle fourni par le plugin

    #MODELE{oembed,url=#URL_VIDEO}
    • Julien

      Bonjour,

      Dans la table spip_documents, il existe, après installation du plugin, le champs « oembed » avec l’url du media en question. Y’a t’-il pas un moyen d’appeler ce champs déjà existant ex : #BALISE_OEMBED au lieu de devoir en créer un nouveau champs avec l’exemple de Ertaional ci-dessus ?

      Merci.

    • Julien

      Heu j’ai rien dit :-)

      La balise #OEMBED est parfaitement fonctionnel de base avec :

      #MODELE{oembed,url=#OEMBED}

    • DD

      Bonjour,

      J’ai pas tout compris...
      Comment insérer automatiquement sur une page article les vidéos ajoutées comme document en incrustation ?

      Actuellement mes vidéos s’affichent en liste comme les autres documents avec une vignette mais le lien envoie vers IMG/distant/html/xpy0mq_l-iledffe.html

      Si j’ajoute la balise #MODELEoembed,url=#URL_VIDEO ou #MODELEoembed,url=#OEMBED

      cela n’affiche rien.

      L’insertion manuelle avec <emb.. fonctionne mais c’est laborieux.

      Merci !
      dd

    • Karen

      Bonjour,

      Super plugin pour gérer la vidéo. J’aimerais aussi beaucoup pouvoir l’appeler où je veux dans le squelette, et pas forcément contraint dans l’article avec le raccourci ’emb’, malheureusement je ne comprends pas la démarche non plus.
      Comme DD, j’ai tenté l’incrustation des 2 balises

      #MODELE{oembed,url=#URL_VIDEO}

      et

      #MODELE{oembed,url=#OEMBED}

      Il n’y a pourtant pas a recréer le modèle en surcouche ? Ni à l’intégrer spécialement dans une boucle ?

      Je suppose que ce n’est qu’un morceau de la démarche, et mes connaissances en SPIP sont trop limitées, j’ai cherché un moment, et là je patauge :-(
      Une âme généreuse pour expliquer aux novices comme nous ?

      Bien cordialement,
      Karen

    • Karen

      Bonsoir,

      Pas une bonne âme pour expliquer comment appeler les vidéos d’un article directement par le squelette ?
      J’ai beau chercher depuis un bon moment, je ne trouve pas comment faire, et aucune page qui en parle, à par ici… Please, help !

      Merci d’avance
      Karen

    • Cerdic

      Le code
      #MODELE{oembed,url=#OEMBED}
      doit etre dans une boucle document, il sert à insérer le document oembed qui est déjà en base de données.

      Sinon tu peux aussi l’utiliser avec une URL en dur du genre :
      #MODELE{oembed,url=http://youtube.com/....}

    • Karen

      1000 mercis Cerdic, c’est génial quand ça fonctionne !
      C’est tout bête pour un spipien éclairé, ça l’était moins pour moi… Encore un souci cependant :
      Je n’arrive pas à faire fonctionner le critère doublons pour éviter d’appeler les vidéos déjà intégrées dans l’article.
      Voici ma boucle dans article.html :

      <BOUCLE_doc(DOCUMENTS){id_article}{mode=document}{doublons}>
[(#MODELE{oembed,url=#OEMBED,doublons})]
</BOUCLE_doc>

      Et j’ai ajouté doublons sur cette boucle de inclure/documents.html

      <BOUCLE_afficher_document(DOCUMENTS) {id_document}{id_article} {mode=document}
{extension IN png,jpg,gif}{doublons}>
[(#MODELE{emb,lien=#URL_DOCUMENT}|image_reduire{500,*})]
</BOUCLE_afficher_document>

      Je ne comprends pas pourquoi ça ne fonctionne pas…

    • Karen

      Oups ! Mauvais copier-coller, dans la boucle d’article, c’est plutôt ça :

      <BOUCLE_doc(DOCUMENTS){id_article}{mode=document}{doublons}>
[(#MODELE{oembed,url=#OEMBED})]
</BOUCLE_doc>

      J’avais fait une autre tentative sur la deuxième ligne, au cas où, mais sans meilleur résultat !

    • DD

      Bonsoir,

      Sur ma page article pour que les paginations des différents types de documents (vidéos, images, documents,) ne s’emmêlent pas les crayons j’utilise {media!=video} ou  {media=video} dans mes différentes boucles.
      (cela empêche aussi les vidéos d’apparaître 2 fois)

      dd

    • Karen

      Merci pour cette réponse DD, je réagis après coup, après 2 semaines à l’étranger…
      Bref ! Ce n’est pas tout à fait ce qui m’intéresse, je crois. Ce que je cherche à faire c’est comme avec la Mediabox : si une image est déjà intégrée dans le corps de l’article, via un raccourci type

      <imgxx|left>

      , elle n’apparaît pas dans le portfolio, et c’est géré automatiquement.

      En résumé, comment exclure de la boucle qui liste les toutes les vidéos attachées à l’article, en oembed, celles qui sont déjà appelées sous la forme

      <embxx|center>

      dans le texte de l’article ?

      Le critère doublons ne fonctionne pas, en tout pas pas tel que j’ai tenté de l’utiliser :-(
      Karen

      Karen

    • Karen

      Ouf, j’ai fini par trouver, enfin !
      Je me réponds à moi-même pour ceux que ça intéresse : j’y suis parvenue en ajoutant le critère vu=non, ce qui donne, pour ma boucle dans article.html :

      <BOUCLE_doc(DOCUMENTS){id_article}{mode=document}{doublons}{vu=non}>
[(#MODELE{oembed,url=#OEMBED})]
</BOUCLE_doc>

      Voir à ce sujet : http://www.spip.net/fr_article4273.html
      Merci à Cédric et à DD qui m’ont aidée à avancer :-)

    • kent1

      Encore plus simple :

      [(#URL_VIDEO|oembed)]

      dans le squelette

      Ou

      [(#VAL{url_de_la_page}|oembed)]
    • DavidM

      J’ai tenté d’appliquer ce fil dans un modèle videos-du-site.html , pour afficher dans un article les vidéos (dans un lecteur) du site chargées par oEmbed. (spip 3.1, oEmbed Version 1.6.5)
      Dans mon article, j’ai appelé mon modèle videos-du-site.html avec : <videos-du-site1>
      Mais je n’arrive pas à afficher les vidéos (elles s’affichent pourtant ailleurs),
      Seule la balise #EMBED_DOCUMENT affiche quelque chose, les docs images du site

      La balise [(#URL_VIDEO|oembed)] affiche spip.php ?video1, spip.php ?video2, etc.

      J’ai par ailleurs une erreur indiquée :
      Aucun squelette modeles/ n’est disponible... plugins-dist/medias/modeles/emb.html / ligne 2

      Je ne comprends pas et ne sais trop que faire....
      Merci pour tout conseil utile.

      Pour info, j’avais aussi installé le plugin Vidéos, que j’ai supprimé car oEmbed intègre plus de types de docs distants. Peut-être ça aurait pu perturber le fonctionnement de oEmbed ?

      Voici mon code :

      <B_documents_videos>
#ANCRE_PAGINATION
	<BOUCLE_documents_videos(DOCUMENTS) {tout}{mode=document}{!par date}{doublons}{vu=non}{pagination 5}>
	
[(#MODELE{oembed,url=#URL_VIDEO})]
--------1--
[(#MODELE{oembed,url=#OEMBED})]
---------2--
[(#URL_VIDEO|oembed)]
--------3-
#EMBED_DOCUMENT
  	--------4-
	</BOUCLE_documents_videos></B_documents_videos>
    • DavidM

      Résolu : en me repenchant sur mon code modèles, j’ai vu qu’il ne convenait pas.
      Ce modèle étant placé dans un article (donc dans une boucle article), il ne listait que les docs vidéo de l’article en question..., j’ai donc modifié le code, et ça marche :

      <BOUCLE_tous-articles(ARTICLES){tout}{!par date}>

<B_documents_videos>
    <h3 class="spip"><multi>[fr]Galerie des vidéos[en]Videos galery</multi></h3>
    
       #ANCRE_PAGINATION
	<BOUCLE_documents_videos(DOCUMENTS){tout}{mode=document}{media=video}{!par date}{doublons}{pagination 5}>
	
[(#MODELE{oembed,url=#OEMBED})]

	</BOUCLE_documents_videos>

  <div style="clear: both;"></div>
  [<div class="barre-pagination pagination">(#PAGINATION{prive}) &nbsp;|  #GRAND_TOTAL <:ima_au_total:></div>]
</B_documents_videos>
</BOUCLE_tous-articles>

      désolé pour le « bruit »

    Répondre à ce message

  • 3
    jeanmarie

    Salut,

    il y a une petite pétouille avec ZDist V1.7.29. Bon, je sais, ZDist n’est plus maintenu, mais je pose ça là hein, si ça peut servir à d’autres...

    Donc, dans ZDist V1, les doc centrés ont un

    display:table;

    (en plus d’un display block !), cf L40 /zpip_v1_99/spip_style.css, ce qui a pour effet d’afficher le player généré en petit sans tenir compte de la taille définie par la config.

    Il suffit de donc surcharger avec

    .spip_documents_center.oembed {display:block;}

    pour que ça fonctionne...

    Voilà,

    jean marie

    Répondre à ce message

  • 4
    ydikoi

    Il semblerait qu’Instagram ait changé son api, la détection de l’URL de la photo ne se fait pas chez moi ?

    Répondre à ce message

  • DD

    Bonjour ;

    En faisant une vérification des liens sur plusieurs sites (SPIP 3.1) je vois qu’il y a beaucoup de liens sous la forme http://www.site.fr/oembed.api/?format=json&url=http%3A%2F%2Fwww.site.fr%2F-rubrique- qui sont listés en erreur 404.

    En regardant dans le code source de la page rubrique (qui ne contient aucune vidéo) je vois :
    <meta name="theme-color" content="#252424" /><link rel="alternate" type="application/json+oembed" href="http://www.site.fr/oembed.api/?format=json&amp;url=http%3A%2F%2Fwww.site.fr%2F-Decouvrir-" />

    Est-ce que c’est du à ce plugin ?
    Merci

    dd

    Répondre à ce message

  • 1
    Karen

    Bonjour,

    J’utilise cet excellent plug-in depuis quelques temps déjà sur quelques sites. Passée à SPIP 3.1 tout récemment, j’ai donc voulu y intégrer la dernière version de Oembed, et je me suis heurtée à un problème, sur les pages publiques uniquement, le bouton play ne fonctionne pas et j’ai ce message par dessus la vidéo :

    onclick="if (jQuery(this).is(’.oe-play-button’))jQuery(this).removeClass(’oe-play-button’).addClass(’loading’).html(decodeURIComponent(’%3Ciframe%20width%3D%22500%22%20height%3D%22281%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2Fw5UwkdH2dPU%3Ffeature%3Doembed%26autoplay%3D1%22%20frameborder%3D%220%22%20allowfullscreen%3E%3C%2Fiframe%3E’)) ;"
    >

    Je précise que ça fonctionne en partie privée… Et que j’ai désactivé tous les autres plugins pour éliminer les pistes. Enfin, ne sachant plus quoi tester, j’ai mis une ancienne version de Oembed, version 1.2.3, et là tout fonctionne parfaitement.

    Je me pose donc la question : y a-t-il un bug sur cette version, une incompatibilité avec spip 3.1 ? Suis-je la seule à avoir ce problème ?

    D’avance merci pour vos réponses,
    Karen

    • Karen

      Bonjour,

      Je me réponds à moi-même et je n’avais pas assez bien cherché, ça venait de mon squelette, un filtre |propre qui traînait sur mon appel #TEXTE, là où je croyais avoir tout remis à zéro… Ô fatigue ennemie !

      Tout fonctionne parfaitement, et je trouve toujours ce plugin absolument génial ! Merci encore à ses créateurs :-)

      Bonne journée

    Répondre à ce message

  • 5
    jeanmarie

    Hello !

    lorsque j’insère l’url d’une vidéo dans un article, j’ai ce message d’erreur si je recalcule la page (var_mode=recalcul) :
    Warning : curl_setopt() [function.curl-setopt] : Invalid curl configuration option in /*CHEMIN_DEPUIS_RACINE*/plugins/oembed/inc/oembed_recuperer_url.php on line 38

    Par contre, l’erreur n’apparait pas en l’affichage « normal » ni en ?var_mode=calcul

    La page en question : http://www.lesreportagesdufourneau.com/Cie-G-BISTAKI-Cooperatzia-le-chemin.html

    Pour info : SPIP 3.0.21 / oEmbed 1.6.0 / PHP 5.2.17 (l’hébergement ne date pas d’hier !)

    Merci,

    jean marie

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom