Streamlike oEmbed integration

oEmbed?

oEmbed (https://oembed.com) is a standardized protocol for easily embedding dynamic content (videos, images, tweets, social network profiles…) from different websites into any other website or application, by simply providing a URL.

Content providers supporting oEmbed send the requesting site all the data related to the media, including title, description, author, visual preview and, if applicable, HTML embedding code, which is then used for proper display on a page.

With oEmbed, there is no need to worry about formatting, copy/paste embedding code or specific development to embed these elements: in your page editor, you just paste the link of a video and the player will be automatically displayed!

oEmbed has become a standard in Web content exchange, with widespread adoption by many sites, CMS and platforms.

How does it work?

oEmbed distinguishes between 2 parties:

• the content provider: this is the source site or service of the media, for example YouTube or Streamlike.
• the client: this is your website or application, where the content (media) is to be displayed.

The producer (Streamlike) inserts a specific oEmbed “discovery” tag in the of the media player. This tag declares the url to query (the “endpoint”) to get all the information about the media.

The client doesn’t always have the option of pasting the player’s HTML code (available in the Streamlike backend, for example) or he may prefer a simpler integration mode. They can simply paste the media URL if their CMS is WordPress or Drupal with the Streamlike plugin installed. Otherwise, he will have to develop a Streamlike oEmbed integration that will transform the media URL into a block of HTML code.

Streamlike oEmbed integration with WordPress and Drupal CMS 

If your website is powered by WordPress or Drupal, Streamlike offers turnkey solutions for oEmbed integration:

• WordPress : integration tutorial
• Drupal : integration tutorial

Manual integration of Streamlike oEmbed

The script to be developed must :

• Retrieve the oEmbed “discovery” tags available at the provided URL
• Retrieve in these tags the endpoint with the corresponding media request
• Call the endpoint with this request
• Retrieve the JSON or XML code provided by Streamlike oEmbed
• Transform the received data into displayable data in the page.

Streamlike provides an oEmbed endpoint : https://cdn.streamlike.com/oembed.

This url receives requests from client sites in the form:
https://cdn.streamlike.com/oembed?url=<URL (encoded) of the Streamlike media>&format=<json|xml>
The Streamlike media url is normalized as follows:

• https://cdn.streamlike.com/play?med_id=<Streamlike Media ID>
• for example : https://cdn.streamlike.com/play?med_id=abcdefghijkl12345

When querying the oEmbed Streamlike endpoint, the media data is provided in JSON or XML format.

For example, the query to the Streamlike endpoint of the above media:

https://cdn.streamlike.com/oembed?url=https%3A%2F%2Fcdn.streamlike.com%2Fplay%3Fmed_id%3Dc57bf6b7891dbff2&maxwidth=1920&maxheight=1080&format=json
will retrieve the following data:

{
"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>"
}

The CMS will then format this data on the page according to its standards and styling.