oEmbed

Conoce cómo usar este formato para incrustar contenido de platform en sitios de terceros

Miguel Giraldo avatar
Escrito por Miguel Giraldo
Actualizado hace más de una semana

oEmbed es un formato abierto diseñado para permitir la incrustación de contenidos de un sitio en otro, mediante la obtención de un código HTML de inserción (iFrame), desde ahora, los recursos Live stream, Image y embed de platform permiten que mediante la implementación de API oEmbed un consumidor pueda obtener de forma rápida dicho código.

La manera de hacerlo es bastante simple y te la enseñamos a continuación.

1. En primera instancia, la ruta oEmbed de mediastream es la siguiente: https://mdstrm.com/oembed, adicional, se debe utilizar también la ruta URL del contenido en platform, como requisito de la API oEmbed, debe estar encodeada, para tal fin se puede usar paginas online de encode-decode para obtenerla.

2. Desde platform, y según el contenido seleccionado, debemos conformar la url requerida, acorde a lo mencionado, en cada recurso disponible se debe agregar el ID correspondiente al contenido:

  • Embed (Video): https://mdstrm.com/embed/{media_ID}

  • Live-stream: https://mdstrm.com/live-stream/{live-stream_ID}

  • Image: https://mdstrm.com/image/{image_ID}

3. Obtenemos la encode url; como ejemplo tomamos el id de un contenido media:

https://mdstrm.com/embed/61a54bef57d6af082df8d14f

la URL encode seria la siguiente:

https%3A%2F%2Fmdstrm.com%2Fembed%2F61a54bef57d6af082df8d14f

4. Una vez se obtiene la ruta url, el usuario debe hacer una solicitud HTTP bajo el siguiente formato: https://mdstrm.com/oembed?url={Encode_URL}

Ejemplo:

https://mdstrm.com/oembed?url=https%3A%2F%2Fmdstrm.com%2Fembed%2F61a54bef57d6af082df8d14f

Esta ruta se copia y pega en el navegador, la respuesta obtenida vendrá bajo el formato JSON por defecto o como un xml, retomando el ejemplo del embed del contenido, la respuesta a la solicitud seria la siguiente:

{
"version": "1.0",
"provider_name": "Mediastream",
"provider_url": "https://www.mediastre.am",
"type": "video",
"title": "Dearborn_st_bridge_4k",
"thumbnail_url":"https://thumbs.cdn.mdstrm.com/thumbs/61362f4eea42ea0e5672fee1/thumb_61a54bef57d6af082df8d14f_61a54bef57d6af082df8d158_1s.jpg",
"thumbnail_width": 640,
"thumbnail_height": 360,
"width": 640,
"height": 360,
"html": "<iframe src='//mdstrm.com/embed/61a54bef57d6af082df8d14f' width='640' height='360' allow='autoplay; fullscreen; encrypted-media' frameborder='0' allowfullscreen allowscriptaccess='always' scrolling='no'></iframe>"
}

Los datos entregados indican la version actual de oEmbed, el nombre del proveedor y su url, el tipo de recurso llamado, el titulo, el thumbnail (toma por defecto el seleccionado como principal), tamaño del thumbnail ancho y alto y el respectivo código HTML para inserción.

Si tomamos el código y lo insertamos en una web de prueba, el clip se reproduce de forma inmediata.

La respuesta JSON es similar en todos los casos de los recursos disponibles.

Puedes consultar adicional la documentación oficial abierta de oEmbed en el siguiente enlace https://oembed.com/

Para tener en cuenta

  1. Para el contenido con closed access (token), oEmbed entregara el formato JSON, mas sin embargo si el código de inserción es implementado en una web, arrojara la alerta de Invalid Token; en este caso y solo de ser necesario compartir el contenido, al iframe recibido en el JSON desde oEmbed se debe agregar el correspondiente token de consumo; el mismo resultado se presenta en caso de encodear la url de platform utilizando el token como query dentro de esta.

  2. Si la URL encode generada no es la correcta, al momento de hacer la solicitud HTTP dará como respuesta Not Found


Si tienes alguna consulta adicional, no dudes en contactarnos a través del chat.

Atte: El equipo de mediastream

¿Ha quedado contestada tu pregunta?