oEmbed

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 :

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 :

Discussion

62 discussions

  • 2

    Bonjour,

    Le plugin ne fonctionne plus sous SPIP 4.1.1

    Reply to this message

  • Bonjour,

    J’ai posé une question concernant Médiacad utilisé par plusieurs académies ici : https://discuter.spip.net/t/spip-oembed-et-mediacad/159438

    (je le poste ici pour que si quelqu’un fait comme moi (cherche mediacad ici), il trouve la suite la suite là-bas).

    Reply to this message

  • 2

    Bonjour,

    Une question généraliste, y-a-t-il des contraintes spécifiques au niveau serveur pour que cela fonctionne ?

    Sur 2 sites différents, un chez O2Switch et un sur un serveur Debian 10 que je gère, la vidéo intégrée avec Oembed de la même façon dans les 2 sites, (au début je voulais intégrer 2 vidéos différentes là maintenant je teste avec la même vidéo), ça marche sur mon serveur et ça marche pas sur O2Switch (rien n’apparait dans la page, je n’ai qu’un figure/figure)... J’en viens à penser que c’est au niveau de O2S qu’il manque un truc, d’ou ma question. J’ai aussi croisé le test et la vidéo que je voulais mettre chez O2S apparait bien si intégrée dans le second site, tout pointe vers le serveur ...

    Merci d’avance
    Pierre

    • Non il n’y a pas de contrainte particulière, et comme je ne sais pas sur quel service est hébergé la vidéo en question je vais faire une réponse générale:
      * parfois certains providers “bloquent” certaines IPs pour cause d’abus
      * parfois on a des soucis de route sur certains providers (par exemple pendant un temps youtube ne répondait pas correctement si on l’interrogeait via une IPv6, ce qu’on a du fixer dans le plugin en faisant une requete qui demande explicitement de passer par une IPv4)

      Bref, on ne maitrise pas tout ce que fait le provider, et donc il peut y avoir des cas de blocage à investiguer au cas par cas...

    • Bonjour,

      Ok, merci pour ces premières infos. Il s’agit de Vimeo dans ce cas. Effectivement je vais donc essayer d’investiguer un peu plus loin, contacter O2S, faire un essai depuis un autre site O2S (puisque chaque offre unique de O2S a une IP différente) ... ou migrer ce site sur un serveur dont j’ai la maîtrise :-)

      Encore merci !
      Pierre.

    Reply to this message

  • 5
    Philippe

    Bonjour,

    Suite au passage en SPIP 4 les vidéos ne s’affichent plus, il ne reste que les liens

    Exemple ici en bas d’article https://www.chessnaute.com/fin-de-partie.html

    Reply to this message

  • 1

    Bonjour,

    Sur ce site, SPIP 3.2.11, avec oEmbed (tout à jour via git, donc en 3.2.11 future 3.2.12)
    Ni le lien vers la vidéo Youtube, ni ni n’affichent la vidéo.

    Visible sur https://www.mairie-lalandelle.fr/BON-VOISINAGE-brulage-des-dechets.html

    J’ai vidé le cache sans succès.

    Reply to this message

  • 2

    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à.

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

    • Désolée b_b,
      je n’avais pas vu ta réponse...à l’époque, c’est résolu depuis ;)
      Laëta

    Reply to this message

  • 3

    Bonjour,
    peut on supprimer le cadre blanc autour de la vidéo, et surtout le titre et le lien vers la chiane ?

    Reply to this message

  • 3

    bonjour,
    si je veux intégrer un document html sur internet. oembed me l’affiche avec la hauteur maximale de la configuration. Cette hauteur me convient pour une video mais pas pour un document ( exemple lettre d’info en html) . y a t-il un moyen de changer la hauteur d’un document et pas de tous ?

    • Salut, de quel type de document s’agit-il ? Si je comprends bien, tu souhaites varier la hauteur d’un embed au cas par cas, c’est bien ça ? Tu dois pouvoir le faire en passant le paramètre maxheight avec la valeur souhaitée lors de l’appel du modèle.

    • bonsoir, j’essaye de permettre aux rédacteurs l’affichage de la version html d’une lettre d’information crée avec le logiciel sendiblue.
      <embxxcenter> m’intègre bien la page dans un iframe mais avec une hauteur qui est celle du parametrage qui correspond pour moi aux videos.
      j’ai essayé
      <embxxcenter|maxheight=1200 > et <oembxx|center|maxheight=1200 > cela ne fonctionne pas
      vaut-il mieux faire un modele iframe que telecharger la page en document distant ?
      merci

    • Ha mais dans ce cas la question n’a rien à voir avec oembed :) Le plugin n’agit que sur les liens issus des sites qu’il prend en charge, et aucunement sur le modèle emb.

    Reply to this message

  • 3

    Bonjour,

    Histoire d’anticiper : https://www.blogdumoderateur.com/oembed-facebook-instagram-reparer/

    À noter également que WordPress supprime Facebook et Instagram en tant que source oEmbed sur son CMS.

    • Concrètement ces providers vont couper oembed, c’est donc mort cf “disposer d’un compte de développeur Facebook & avoir une application Facebook enregistrée”.

    • ça me refait penser à une reflexion que je me suis fait : il faudrait avoir une option pour sauvegarder les oembeds dans une table dédiée si on veut pereniser le contenu.

      Actuellement quand un provider tombe ou ferme, ou change son api, au prochain recalcul forcé le cache est perdu et on a plus rien à afficher.
      Avec l’option on garderait le dernier contenu connu sauvé en base et on s’assurerait que l’article qui cite et s’appuye éventuellement sur des ressources oembed reste lisible et compréhensible dans le temps tel qu’il a été initialement publié

      (c’est trop tard ici pour FB et Instagram de toute façon, et fuck zuckerb*rg et son univers impitoyable)

    • Génial les commentaires! FUCK Zuckerb*rg!!

    Reply to this message

  • 5

    Bonjour,

    Sur un Spip 3.2.8 avec la version 2.3.1 d’Oembed, plus possible d’importer les vignettes des vidéos Dailymotion.
    Quelqu’un rencontre t’il ce problème ?

    • A priori, c’est parce que Dailymotion ne met pas (plus ?) s’extension jpg à ses vignettes de vidéo. Il faudrait forcer l’extension dans la fonction “charger_fonction”. Quelqu’un saurait-il comment on fait ça ?

    • Je m’en suis sorti en modifiant oembed_pipeline.php ligne 199 ainsi :

      // lorsqu'une vignette ne comporte pas d'extension
      $vtmp=$v;
      if(!preg_match('\.', $v)) {
      	$v .= '.jpg';
      }
      if (preg_match(',^(\w+:)?//,', $v)) {
      	$files = array(
      		array(
      			'name' => basename($v),
      			'tmp_name' => $vtmp,
      			'distant' => true,
      		)
      	);
      } elseif (file_exists($v)) {
      	$files = array(array(
      		'name' => basename($v),
      		'tmp_name' => $vtmp
      	));
      }
    • Pourrais tu ouvrir sur git.spip.net une pull request ?

    • Je viens de le faire. ( je ne savais pas que c’était si facile :-) )

    • Non tu a commité directement. Un pull request c’est faire un commit dans une branche à part, puis ensuite demander aux gens “est-ce qu’on peut intégrer ce(s) commits”.

    Reply to this message

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

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