oEmbed

4 December 2013 – by b_b, Cerdic – 196 commentaires

français, Português do Brasil
1
2
3
4
5
46 Votes

Table of contents

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
by 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 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 :

updated on 3 June 2020

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

53 discussions

  • 1
    Laeta

    Bonjour,

    j’utilise le plugin pour intégrer des videos distantes youtube,
    tout fonctionne bien, sauf que j’ai l’erreur suivante:
    1 Erreur(s) dans le squelette / Aucun squelette modeles/ n’est disponible... plugins-dist/medias/modeles/emb.html /

    pourtant le modele emb.html est bien là.

    • b_b

      Salut, quelle version de SPIP utilises-tu ? Le plugin oembed est-il bien à jour, quelle version ?

    Reply to this message

  • 4
    Manu

    Taille des vignettes
    Quand une vidéo est affichée “plein pot” dans une mise en page grande largeur, la vignette insérée en background-image avec la propriété cover devient assez vite dégradée en terme de qualité. Sur les essais que j’ai faits, l’image qui est récupérée par Oembed fait 480x360px. Y a-t-il un moyen de choisir/contrôler la taille des vignettes afin d’avoir un visuel de qualité ?

    • Cerdic

      En 1 mot : ce n’est pas prévu par le protocole oEmbed.

      Donc éventuellement, sur certains providers, en cherchant dans leurs méandres techniques si on peut retrouver une vignette de meilleure résolution via une requete http supplémentaire, c’est peut-être faisable ?

      Il faudra alors accepter que ça prenne plus de temps, que ça casse dans le temps en fonction des changements d’api sur les providers concernés (et donc toujours être capable d’utiliser la vignette par défaut si on arrive pas à avoir une vignette de meilleure résolution).

    • Manu

      OK, compris.
      Concernant les videos YT, l’API propose des tailles de vignettes allant quasi systématiquement 640x480 et également très souvent 1280x720. Certes, c’est susceptible de changer, mais ça a l’air d’être en place de manière assez stable depuis pas mal de temps.
      https://i.ytimg.com/vi/ID_de_la_video/default(mqdefault/hqdefault/sddefault/maxresdefault).jpg
      Pour des vidéos affichées plein écran, c’est beaucoup agréable/accrocheur (ou - pour pour le dire différent - une image 480x360 étirée exagérément conduit à un résultat pénalisant).
      Je ne sais pas ce qu’il en est pour les autres providers

    • b_b

      Juste une remarque, à ce sujet, je ne pense pas que ça soit une bonne idée pour les perfs et la planète si on se met à balancer de la vignette en 1280px par défaut alors que l’image ne sera pas affichée à plus de 640px de large dans la plupart des cas...

      > un résultat pénalisant

      Pénalisant pour quoi ? Le call to action ? ^^

    • Manu

      Oui, d’accord pour la planète. 640x480 peut constituer un bon compromis, pourquoi pas.

      Quand je dis “pénalisant”, c’est côté esthétique qui va de pair avec la qualité ressentie par le visiteur. J’ai un client qui dispose d’un site qui s’intéresse à des itinéraires techniques agricoles écologiquement innovants. Le contenu est riche et technique (2500 articles, 6000 documents dont 800 vidéos) Pour le moment, j’utilise le plugin videos, ça fonctionne bien et les visuels des vidéos sont propres et sont bien en phase avec le contenu.
      Pour différentes raisons (essentiellement parce que la récupération des vignettes YT connaît parfois qqs échecs), je regarde si il seraait intéressant de changer de fusil d’épaule et utiliser oembed qui parait plus robuste, mais, là, c’est vrai que cette petite taille de vignette (et donc la qualité du visuel affiché) pénalise le ressenti que l’on a en visualisant la page. Bref, ça fait moins propre, moins “pro”. C’est ça qui est pénalisant.

    Reply to this message

  • 14
    baloo

    Bonjour,
    Savez vous si dans spip ( hormis un autre plugin xx) seuls les documents OEMBED ont une extension html ?
    dans ce cas je pourrais écrire systématiquement

    <BOUCLE_test_oembed(CONDITION){si #EXTENSION |=={html} }>
 			[(#MODELE{oembed,url=#OEMBED})]
</BOUCLE_test_oembed> 
                      [(#INCLURE{fond=modeles/emb, id_document}|trim)]}
<//B_test_oembed>

    ou y at-il un autre moyen de voir si un document est généré par oembed ?

    • baloo

      En fait je teste avec spip 3.3 des videos youtube .car le serveur de prod va passer en php 7.4( 10 sites concernés)

      [(#MODELE{oembed,url=#OEMBED})] fonctionne dans les squelettes 
      [(#INCLURE{fond=modeles/emb, id_document}|trim)]} fonctionne en 3.2 mais ne  fonctionne plus en 3.3

      embxx dans un article fonctionne comme docxx
      impossible d’avoir directement la video.       est-ce parce que les modeles
      doc et emb ont changés en 3.3 ? y a t-il une syntaxe qui fonctionne ?

    • baloo

      pour info : pb detecter avec spip 3.3 sans autre plugin

    • Pierrox

      Hello,

      Je viens de tester oembed sur spip3.3.
      Lorsqu’on ajoute une url (ex: video youtube), dans jondre document, il reference l’url comme une page html pas comme une video distante!

      de plus la syntaxe suivante au coeur d’un article <https://www.youtube.com/watch?v=mCAJ1uyr8Vs> ne fonctionne plus

    • baloo

      il y a, parait-il, une constante a initialiser sur spip 3.3 pour qu’il fonctionne comme avant pour img, doc, emb. Je ne l’ai pas trouvée.

      EN attendant, j’ai mis un fichier dans le répertoire modele : file.html contenant

      <BOUCLE_doc(DOCUMENTS) {id_document=#ENV{id,#ENV{id_document}}}>
 [(#EXTENSION|=={pdf}|oui) 
         [(#PLUGIN{pdfjs}|oui) [(#MODELE{emb_pdf,env,id_document,largeur=100%,hauteur=1050})] 
        ] 
        [(#PLUGIN{pdfjs}|non)   
            <iframe src="#URL_DOCUMENT"  width="100%" height="#ENV{hauteur,1050}px" [ title="(#TITRE|attribut_html)"]  name="PDF_#ID_DOCUMENT" SCROLLING="yes" allowfullscreen ></iframe>         
        ]
 ]
   [(#EXTENSION|=={html}|oui)
        [(#PLUGIN{oembed}|oui)   [(#MODELE{oembed,url=#OEMBED})] ]
        [(#PLUGIN{oembed}|non)    <INCLURE{fond=plugins-dist/medias/modeles/file,env} /> ]
        ]

 [(#EXTENSION|=={pdf}|non) 
                [(#EXTENSION|=={html}|non)
                        <INCLURE{fond=plugins-dist/medias/modeles/file,env} />
                        ]
  ]
</BOUCLE_doc>

      Je n’ai jamais utilisé <https://www.y...> dans l’article mais . Cela fonctionne bien, avec emb/doc

      <docxx> donne l'image vers la video  <embxx>  incruste la video.

      J’ai juste un pb lorsque je demande à modifier un document video (
      “modeles/file : Paramètre d’inclusion incorrect : id/”) mais cela fonctionne quand même.
      et j’ai peut être un pb avec inserer_modele. Il doit falloir améliorer ce code.

      Je dois passer obligatoirement en php 7.4 début juin et donc en spip 3.3 et dernières version de tous les plugins utilisés. je n’aurais qu’à supprimer ce fichier quand cela sera pris en charge par oembed.
      j’aurais préféree ne pas faire cette bidouille.

    • b_b

      @Pierrox

      Lorsqu’on ajoute une url (ex : video youtube), dans jondre document, il reference l’url comme une page html pas comme une video distante !

      Ça a toujours été le cas.

      de plus la syntaxe suivante au coeur d’un article < https://www.youtube.com/watch?v=xxxxxxxx ne fonctionne plus

      Cette syntaxe n’existe pas dans oembed et n’est absolument pas mentionnée dans la présente doc, tu parles bien du même plugin ? oO

    • Pierrox

      Pour le raccourcis c’est ecrit et ça fonctionne hein :D

      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 :

      L'estafette SPIP
      L'estafette SPIP
      by tetue
      https://www.flickr.com/photos/romyt...

      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 :

      Démonstration par l’exemple là

      MOSHPIT - Follow The Loser
      by Mosh Pit
      https://www.youtube.com/watch?v=M7a...

      En spip3.2 ça fonctionne nickel, en 3.3 le 2e syntaxe ne fonctionne pas, et le modèle n’initialise par le lecteur video.

    • b_b

      Ha oui pardon my bad, mais comme tu peux le voir ça fonctionne ici et contrib est bien en 3.3 :)

    • baloo

      les rédacteurs ( 10 sites) utilisent oembed de la maniere suivante.
      Ils choisissent une url dans la saisie d’un document distant ( id_ document xx) puis utilisés
      pour avoir une image lien vers la video et pour l’integrer ou utilsent l’url directement.
      Je suis passe sur un site de test en php 7.4 et spip 3.3 ...
      <embxx> se comporte comme <docxx> même en enlevant les autres plugins, c’est une evolution de 3.3 pour les doc/emb

      Le modele [(#MODELE{oembed,url=#OEMBED})] ] fonctionne D’où ma bidouille pour ne pas avoir a modifier sur les 10 sites et ne pas perturber les rédacteurs.

      J’ai cru comprendre qu’il y avait un define à mettre dans mes_options.php pour avoirun fonctionnement des modeles doc et emb en 3.3 comme en 3.2 et anterieur Sauriez vous quel est ce define ?

      pour l’affichage d’une video en saisissant l’url. Je confirme que cela fonctionne ... si on a pensé a cocher la case dans la configuration du plugin.

    • Pierrox

      Je viens de retester sur une install 3.3 vierge, le raccourci suivant fonctionne
      <https://www.youtube.com/watch?v=mCAJ1uyr8Vs>

      @b_b
      je vais faire un report sur le gestionnaires de ticket sur le plugin Media
      Du coup y a pas de soucis avec ce oEmbed :D

    • baloo

      OUI mais est-ce que tu as testé avec les raccourcis doc et emb ?

    • Pierrox

      Ah désolé, j’avais pas percuté que oEmbed livré une floppée de modèles.
      Pour le soucis du modèle embXX, on dirait que c’est au niveau du js que ça déconne.

      Test ici
      https://sandbox33.roxing.net/Plugin-Oembed-sur-Spip-3-3#bug-Oembed

    • baloo

      Le fait que img doc et emb donnent la même chose est apparemment voulu dans la version spip 3.3.
      a priori Un define permet de rétablir le fonctionnement antérieur. doc et emb différents.
      je n’ai pas trouve la valeur en question .

      https://www.mail-archive.com/spip-dev@rezo.net/msg67247.html

    • Cerdic

      @baloo en effet je viens de regarder et la gestion des emb n’était pas complète sur SPIP 3.3 suite à la refonte des modeles de document.

      Je viens d’envoyer un correctif sur le plugin medias de SPIP 3.3
      https://git.spip.net/spip/medias/commit/5df7ada7115bb6c4a2b5ed149b2effa8fc5cb141

      et un correctif va suivre sur le plugin oembed à la suite de quoi tout devrait remarcher comme avant sans bidouille :)

      Merci du signalement !

    • b_b

      @Cedric (y) bien joué !

    Reply to this message

  • 4
    Francky

    Hello :)
    Test fait en spip 3.3
    php 7.1 chez ovh

    En plus de https://contrib.spip.net/oEmbed-4407#comment503812-503461
    J’ai trouver un nouveau problème :(

    Le plug ne semble plus fonctionner avec des vidéos venant de facebook qui sont pourtant public et qui n’ont donc pas besoin d’avoir un compte pour les regarder.
    exemple:

    https://www.facebook.com/jack.elcalvo/videos/10157645289179900/

    Alors que cela devrait fonctionner car Facebook est dans la liste blanche natif :(
    https://git.spip.net/spip-contrib-extensions/oembed/src/branch/master/inc/oembed.php
    Franck

    Reply to this message

  • 3
    Francky

    hello :)
    Il y aurait moyen que cela fonctionne avec les vidéos de Arte ?
    Exemple, pour afficher cette vidéo, il faut que je fasse dans la médiathèque l’ajout d’un doc internet: https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv1%2Fconfig%2Ffr%2F082188-001-A
    Et que dans mon article j’écrive emb à la place de doc.
    Le problème, c’est que ce n’est pas très pratique pour le partage...
    Je suppose qu’il faudrait faire l’ajout dans la liste blanche comme dit dans l’article, mais là, j’avoue avoir un peu de mal sur ce que je dois mettre :(

    Franck

    Reply to this message

  • 1
    iota

    Il y a une erreur 404 sur le lien pour consulter la liste complète des sites (voir https://contrib.spip.net/oEmbed-4407#Et-je-peux-faire-ca-avec-n-importe-quel-site )

    Bien à vous,
    iota

    Reply to this message

  • yann45

    Bonjour,
    Un petit détail sans importance sur le fonctionnement. C’est juste une question de visuel. L’icône oE affichée dans la liste Configuration est trop grande et déborde sur le texte adjacent.
    Je sais je chipote. :-)
    Yann

    Reply to this message

  • Julien

    Oembed et AMP

    J’utilise le plugin Oembed, et je commence une version du site en AMP (en fonction de l’adresse, je change de répertoire de squelettes, et sur la balise TEXTE je passe un filtre qui transforme les img en amp-img).
    Mais oEmbed insère tout de même une balise img (par exemple pour l’intégration d’un tweet) : ce qui voudrait dire que son contenu est inséré après le passage du filtre...
    D’où la question : comment faire une version Oembed en AMP ?
    Il serait simple d’ajouter un jeu de modèles supplémentaires en cas de version AMP, surtout oembed_rich, mais je ne vois pas dans quel fichier se fait l’ajout de la balise IMG (par exemple pour l’intégration d’un tweet).
    Si vous avez des pistes... ou bien une version AMP de Oembed !
    Merci,
    Julien

    Reply to this message

  • goony

    Bonjour,

    Aujourd’hui une video youtube ne s’affichait pas. Sur une installation locale, la meme video fonctionnait. Au final, j’ai souhaite effacer le cache de la video qui etait cassee. Mais comme les fichiers cache sont nommes de maniere illisible, j’ai du effacer tous les caches, soit des centaines de fichiers.

    La video qui avait un probleme la premiere fois a finalement fonctionne une fois le cache purge. Donc c’etait un glitch, je ne saurai probablement jamais pourquoi ca a plante. Mais du coup je me dis que cela pourrait arriver a n’importe quelle video. Et comme je viens de supprimer des centaines de caches, je me dis que cela pourrait se produire a nouveau pour des videos dont les caches etaient bons jusque la.

    La ou je veux en venir, c’est que je pense qu’il serait bien de recalculer un cache oembed quand on fait un ?var_mode=recalcul sur la page, histoire de donner une seconde chance a un oembed casse sans pour autant perdre tous nos caches existants.

    Reply to this message

  • 1
    Filipe

    Chers amis b_b et Cerdic, depuis peu je retrouve des difficultés pour ajouter des documents dans un article depuis une URL. Toutes les tentatives aboutissent dans le message suivant: “Oups. Une erreur inattendue a empêché de soumettre le formulaire. Vous pouvez essayer à nouveau.”. Je ne sais pas si c’est un problème avec le merveilleux plugin oEmbed ou c’est lié avec un autre plugin.

    • Cerdic

      C’est en général une erreur fatale, probablement liée à du code personnel, ou à l’un des plugins, mais ça peut-être n’importe lequel. Il faut regarder dans les logs du serveur (apache ou php selon la configuration) pour voir qui cause cette erreur

    Reply to this message

Ajouter un commentaire

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom