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

oEmbed

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

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

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 :

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

Télécharger

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',
);

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 :

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;
}

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 :

scheme : http://urldevotresite.net/*
endpoint : http://urldevotresite.net/oembed.api/

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

Tout afficher

Vos commentaires

0 | 10 | 20 | 30

# Le 29 mai à 12:37, par 1138 En réponse à : oEmbed

Hello !

Afin d’augmenter la confidentialité, l’embed de Youtube ne pourrait-il pas être sous la forme youtube-nocookie.com (avec un choix dans l’interface de configuration) ?

(Au fait, y a-t-il d’autres services qui proposent un truc semblable à ce que fait Youtube avec son nocookie ?)
- # ^ Le 29 mai à 15:21, par b_b En réponse à : oEmbed
  
  Bonne idée, je pense même qu’on peut l’activer dans tous les cas, j’ai un patch pour le faire, je l’envoie après discussion avec le reste de l’équipe.
- # ^ Le 29 mai à 15:52, par b_b En réponse à : oEmbed
  
  Voilà, c’est dispo dans la version 2.0.7 : https://zone.spip.org/trac/spip-zone/changeset/110444
- # ^ Le 29 mai à 16:11, par 1138 En réponse à : oEmbed
  
  Merci beaucoup ! 🙏
Répondre à ce message
# Le 26 mai à 18:38, par max En réponse à : oEmbed

Bonjour,

Merci pour ce plugin mais j’ai un problème (spip 3.1 / plugin 2.0.6) le tout sur serveur free.

Lorsque je cherche à inclure un document (issu de youtube ou autre) j’ai systématiquement le même message d’erreur : Le fichier distant *************** n’a pas pu être trouvé

Si vous avez une solution, je suis preneur.

Je précise que j’ai aussi essayé avec un spip 3.2.

Merci pour votre aide.
- # ^ Le 26 mai à 18:41, par b_b En réponse à : oEmbed
  
  Salut, c’est certainement un problème de restriction réseau chez ton hébergeur. Cela fait un bon moment que la communauté recommande de ne plus utiliser free comme héberger à cause des multiples problèmes qu’y rencontres les gens depuis pas mal de temps.
  
  Sinon, essaye peut-être du côté de cette doc : https://contrib.spip.net/SPIP-chez-Free-fr
Répondre à ce message
# Le 16 mai à 12:02, par RealET En réponse à : oEmbed

Bonjour,

Je constate que le plugin rajoute dans toutes les pages :

Sauf que pour les rubriques, ça donne une 404.
Exemple : la rubrique de cet article : https://contrib.spip.net/oembed.api/?format=json&url=https%3A%2F%2Fcontrib.spip.net%2FoEmbed
- # ^ Le 16 mai à 13:37, par b_b En réponse à : oEmbed
  
  Je confirme, c’est du au fait que par défaut le plugin ne propose pas de modèle pour les rubriques, mais certains peuvent en fournir. Donc amha, il ne faut pas retirer ces liens du head pour les rubriques, mais plutôt fournir un modèle de base pour celles-ci afin que le lien ne pointe pas sur une 404.
- # ^ Le 16 mai à 16:55, par RealET En réponse à : oEmbed
  
  C’est donc ici https://zone.spip.org/trac/spip-zone/browser/_plugins_/oembed/oembed/output/modeles/article.json.html qu’il faudrait un équivalent rubrique.json.html
  
  Et vu les traitements qui sont fait ici https://zone.spip.org/trac/spip-zone/browser/_plugins_/oembed/action/api_oembed.php#L40 il n’est absolument pas question de conditionner le lien à l’existence du modele.
  
  Par contre, pour éviter des 404, je proposerais bien de rajouter un fallback.json.html qui se contenterait de donner les infos du site (nom site, slogan, descriptif).
Répondre à ce message
# Le 14 mars à 20:52, par SoirBleu En réponse à : oEmbed

Bonjour,

Bravo pour ce plugin. Pour information, j’ai réussi à intégrer des timelines JS dans les articles.

Par contre une petite question : comment faire pour ne plus avoir l’url ou un titre qui s’affiche sous le doc intégré à l’article ?

Merci

Répondre à ce message
# Le 11 mars à 23:55, par Yohooo En réponse à : oEmbed

Serait-il possible de remplacer la class spip_document_center par la class spip_documents_[(#ENValign,center)] dans le modele text_oembed ?

Répondre à ce message
# Le 27 février à 10:26, par baloo En réponse à : oEmbed

Bonjour,
je commence a utiliser ce plugin qui effectivement facilite la vie des rédacteurs et permet d’insérer facilement des vidéos distante dans des sliders, galerie etc
Je voudrais sécuriser le code et pour cela dans mes modeles je teste la présence ou non du plugin. Cela est ok.
Par contre si je désactive le plugin et que le rédacteur insère le document html créé avec le plugin (doc ou emb) qui apparait toujours dans les documents ... la rubrique est anormale dans l’espace privé : on ne voit plus ni mot clé , ni sous rurbrique, ni articles.
problème aussi dans espace public
y a t-il un moyen d’éviter cela ..
merci

Répondre à ce message
# 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.
- # ^ Le 21 février à 12:59, par Fred En réponse à : oEmbed
  
  Idem chez moi. Par contre forcer le passage par le filtre via [(#TEXTE|propre)] supprime effectivement la balise <html> superfétatoire.
Répondre à ce message
# Le 16 février à 18:32, par goony En réponse à : oEmbed
J’ai constate que les videos de type « live » sur Facebook ne fonctionnent pas pour moi. Une video Facebook « normale » fonctionne en tous cas. Mais si c’est une video « live », que cela soit durant la diffusion, ou meme apres la diffusion (archive de la video), le plugin ne semble pas reccuperer le contenu oembed de la part de Facebook.

Voici un exemple de video live (archive) :

https://www.facebook.com/canterarealmadrid/videos/1672630512793157/

Le retour cURL du lien oembed est vide, d’apres le plugin. Pourtant, j’arrive a voir le retour en entrant l’URL dans un browser, ou bien meme en utilisant la ligne de commande curl du serveur :

https://www.facebook.com/plugins/video/oembed.json/?url=https%3A%2F%2Fwww.facebook.com%2Fcanterarealmadrid%2Fvideos%2F1672630512793157%2F&maxwidth=600&maxheight=400&format=json

Je ne comprends pas pourquoi l’appel cURL dans le code PHP du plugin ne trouve rien.
- # ^ Le 19 février à 15:28, par Cerdic En réponse à : oEmbed
  
  Le problème ne vient pas du plugin car si je teste dans une instance de SPIP locale ça marche très bien. Je soupçonne plutôt que l’IP du serveur en question a été bloquée par FB car faisant trop de requêtes ou quelque chose comme ça.
  
  Il faut tester le curl depuis la même adresse IP que celle qui héberge le site par exemple.
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

0 | 10 | 20 | 30

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

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

Texte de votre message
Prévenez-moi de tous les nouveaux commentaires de cette discussion par email

Ajouter un document

gif, jpg, png

SPIP-Contrib

oEmbed

C’est quoi ce truc ?

Comment ça marche ?

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

Traitements automatiques

Fonctions de post-traitement

Côté serveur

Rubriques

Derniers commentaires

Compatibilité

Téléchargements

oEmbed

Sur le Web

Vos commentaires

Répondre à cet article

Ça discute par ici

Soundmanager

LIM : alléger l’espace privé

Module de paiement Paypal Express Checkout

Calendrier Mini 2.0

Albums 3

Ça spipe par là

SPIP Blog

SPIP - Seenthis

SPIP Forums

SPIP-Zone

SPIP SVN