oEmbed ?
oEmbed (https://oembed.com) est un protocole standardisé permettant d’intégrer facilement du contenu dynamique (vidéos, images, tweets, profils de réseaux sociaux…) provenant de différents sites web dans tout autre site ou application, en fournissant simplement une URL.
Les fournisseurs de contenu prenant en charge oEmbed envoient au site demandeur toutes les données relatives au média, dont le titre, la description, l’auteur, un aperçu visuel et selon le cas un code HTML d’intégration, qui sont alors utilisés pour un affichage correct sur une page.
Avec oEmbed, il n’est donc plus nécessaire de se soucier de mise en forme, de copier/coller un code d’intégration ou de passer par un développement spécifique pour intégrer ces éléments : dans l’éditeur de votre page, vous collez le lien d’une vidéo et c’est le player qui sera automatiquement affiché !
oEmbed est devenu aujourd’hui un standard dans l’échange de contenu Web, avec une adoption généralisée par de nombreux sites, CMS et plateformes.
Comment ca marche ?
oEmbed distingue 2 intervenants :
- le producteur (« provider ») du contenu : il s’agit du site ou du service source du média, par exemple YouTube ou Streamlike.
- le client (« consumer ») du contenu : il s’agit de votre site ou application, où le contenu (le média) doit être affiché.
Le producteur (Streamlike) insère une balise oEmbed spécifique « discovery » dans le <head> du lecteur du média. Cette balise déclare l’url à interroger (le « endpoint ») pour obtenir toutes les informations sur le média.
Le client n’a pas toujours la possibilité de coller le code HTML du lecteur (disponible dans le backend Streamlike, par exemple) ou il peut préférer un mode d’intégration plus simple. Il pourra simplement coller l’URL du média si son CMS est WordPress ou Drupal avec le plugin Streamlike installé. Sinon, il devra développer une intégration Streamlike oEmbed qui transformera l’URL du média en un bloc de code HTML.
Intégration de Streamlike oEmbed au sein des CMS WordPress et Drupal
Si votre site est motorisé par WordPress ou Drupal, Streamlike propose des solutions clés-en-mains d’intégration de oEmbed :
- WordPress : Tutoriel d’intégration
- Drupal : Tutoriel d’intégration
Intégration manuelle de Streamlike oEmbed
Le script à développer doit :
- Récupérer les balises “discovery” oEmbed disponibles à l’URL fournie
- Récupérer dans ces balises le endpoint avec la requête correspondante au media
- Appeler le endpoint avec cette requête
- Y récupérer le code JSON ou XML fourni par Streamlike oEmbed
- Transformer les données reçues en données affichables dans la page.
Streamlike fournit un « endpoint » oEmbed : https://cdn.streamlike.com/oembed.
Cette url reçoit les requêtes de sites clients sous la forme :
https://cdn.streamlike.com/oembed?url=<URL (encodée) du media Streamlike>&format=<json|xml>
L’url du média Streamlike est normalisée comme suit :
- https://cdn.streamlike.com/play?med_id=<Streamlike Media ID>
- par exemple : https://cdn.streamlike.com/play?med_id=c57bf6b7891dbff2
Lors de la requête au endpoint oEmbed Streamlike, les données du media sont fournies au format JSON ou XML.
Par exemple, la requête au endpoint Streamlike du media ci-dessus :
https://cdn.streamlike.com/oembed?url=https%3A%2F%2Fcdn.streamlike.com%2Fplay%3Fmed_id%3Dc57bf6b7891dbff2&maxwidth=1920&maxheight=1080&format=json
va récupérer les données suivantes :
{
"version": "1.0",
"type": "video",
"provider_name": "Streamlike",
"provider_url": "https://www.streamlike.com/",
"width": 1920,
"height": 1080,
"title": "Encodage haute qualité",
"thumbnail_url": "https://cdn.streamlike.com/c/a25f39b5dd5a780f/medias/c57bf6b7891dbff2/cover/cover.jpg",
"thumbnail_width": 1920,
"thumbnail_height": 1080,
"html": "<style>\n .sl-resp {position: relative; overflow: hidden; padding-top: 56.25%;}\n .sl-resp iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}\n</style>\n<div class=\"sl-resp\"><iframe src=\"https://cdn.streamlike.com/play?med_id=c57bf6b7891dbff2&max_width=1920&max_height=1080\" name=\"media-c57bf6b7891dbff2\" mozallowfullscreen webkitallowfullscreen allowfullscreen allow=\"autoplay; fullscreen\"></iframe></div>"
}Le CMS va alors mettre en forme ces données selon ses normes et codes d’affichage sur la page.
