Embedding .NET videos with oEmbed

oEmbed

This is definitely something you should be aware of. oEmbed allows you to embed easily content from different sources/providers into your website. It’s an open standard for embedding content. Following the official website:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

So, let’s assume you want to embed a YouTube video on your website, previuosly you would need to browse YouTube API, or check under the movie what is the code of iframe to embed a given movie.

With oEmbed the situation looks trivial. You need call a given endpoint/url that will provide you with the video’s details in a predefined format (oEmbed format). For instance, if you want to display the movie (which I strongly encourage you to check, if you didn’t see it yet!): https://vimeo.com/110554082, you need to call this address:

https://vimeo.com/api/oembed.json?url=https://vimeo.com/110554082

and you will be presented with all the specific information about it


{
"type":"video",
"version":"1.0",
"provider_name":"Vimeo",
"provider_url":"https:\/\/vimeo.com\/",
"title":"One Hacker Way - Erik Meijer",
"author_name":"Reaktor",
"author_url":"https:\/\/vimeo.com\/reaktorfi",
"is_plus":"0",
"html":"<iframe src=\"https:\/\/player.vimeo.com\/video\/110554082\" width=\"1920\" height=\"1080\" frameborder=\"0\" title=\"One Hacker Way - Erik Meijer\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>",
"width":1920,
"height":1080,
"duration":2758,
"description":"One Hacker Way, a Rational Alternative to Agile\nPresented at Reaktor Dev Day 2014\nhttp:\/\/reaktor.fi\/blog\/erik-meijer-software-eating-world\/\nhttp:\/\/reaktordevday.fi",
"thumbnail_url":"https:\/\/i.vimeocdn.com\/video\/494847156_1280.webp",
"thumbnail_width":1280,
"thumbnail_height":720,
"thumbnail_url_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src=https:\/\/i.vimeocdn.com\/video\/494847156_1280.webp&src=http:\/\/f.vimeocdn.com\/p\/images\/crawler_play.png",
"upload_date":"2014-10-31 04:35:08",
"video_id":110554082,
"uri":"\/videos\/110554082"
}

As you can see, it gives you a lot of very interesting information, which you can use to embed the video, even the HTML code! You have no idea how useful this is when you are beginning to think abou the details like how to get the thumbnail of a given video, or how to get the duration, upload, or any other property linked with the video. Here you have it all, in clear form, without any confusion.

That’s not all. Once the format of the object is defined (which properties are exposed etc.) you could change the output format as well (e.g. from JSON to XML), in case JSON doesn’t suit you. So in the url provided above, you can just change the json part to xml:

https://vimeo.com/api/oembed.xml?url=https://vimeo.com/110554082

and you’re ready to go:

 
<oembed>
<type>video</type>
<version>1.0</version>
<provider_name>Vimeo</provider_name>
<provider_url>https://vimeo.com/</provider_url>
<title>One Hacker Way - Erik Meijer</title>
<author_name>Reaktor</author_name>
<author_url>https://vimeo.com/reaktorfi</author_url>
<is_plus>0</is_plus>
<html>
<iframe src="https://player.vimeo.com/video/110554082" width="1920" height="1080" frameborder="0" title="One Hacker Way - Erik Meijer" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</html>
<width>1920</width>
<height>1080</height>
<duration>2758</duration>
<description>
One Hacker Way, a Rational Alternative to Agile Presented at Reaktor Dev Day 2014 http://reaktor.fi/blog/erik-meijer-software-eating-world/ http://reaktordevday.fi
</description>
<thumbnail_url>https://i.vimeocdn.com/video/494847156_1280.webp</thumbnail_url>
<thumbnail_width>1280</thumbnail_width>
<thumbnail_height>720</thumbnail_height>
<thumbnail_url_with_play_button>
https://i.vimeocdn.com/filter/overlay?src=https://i.vimeocdn.com/video/494847156_1280.webp&src=http://f.vimeocdn.com/p/images/crawler_play.png
</thumbnail_url_with_play_button>
<upload_date>2014-10-31 04:35:08</upload_date>
<video_id>110554082</video_id>
<uri>/videos/110554082</uri>
</oembed>

Once you know it, you can’t even think of a reason why nobody did it like that from the very beginning. If I didn’t put the link in preformatted content:

https://vimeo.com/api/oembed.json?url=https://vimeo.com/110554082

WordPress automatically converts it like that:

I didn’t need to add any code or html. WordPress parsed the link, and understood what’s going on and displayed a movie embedded in my post.

There is one thing to say to make this even better. The list of providers offering their content in this format is just huge, including things like Twitter, Flickr, YouTube, Instagram and many, many others. On oEmbed official website I could even find some data in JSON to check programmatically:

http://oembed.com/providers.json

But it doesn’t include all providers (unfortunately). For instance, I could find that twitter offers this functionality in its API, but you won’t find it in the JSON provided by oEmbed. So you can do:

https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FInterior%2Fstatus%2F507185938620219395
{
 "cache_age": "3153600000",
 "url": "https://twitter.com/Interior/status/507185938620219395",
 "provider_url": "https://twitter.com",
 "provider_name": "Twitter",
 "author_name": "US Dept of Interior",
 "version": "1.0",
 "author_url": "https://twitter.com/Interior",
 "type": "rich",
 "html": "<blockquote class=\"twitter-tweet\"><p>Happy 50th anniversary to the Wilderness Act! Here's a great wilderness photo from <a href=\"https://twitter.com/YosemiteNPS\">@YosemiteNPS</a>. <a href=\"https://twitter.com/hashtag/Wilderness50?src=hash\">#Wilderness50</a> <a href=\"http://t.co/HMhbyTg18X\">pic.twitter.com/HMhbyTg18X</a></p>— US Dept of Interior (@Interior) <a href=\"https://twitter.com/Interior/status/507185938620219395\">September 3, 2014</a></blockquote>\n<script async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>",
 "height": null,
 "width": 550
}

Generally speaking, it just feels like it’s a time-saver.

The website I’m working on is a perfect fit for such thing. Since I will not download the movies, nor do I plan to have own videos hosted, what is the most interesting for me is how to just display the video properly so that user gets the best experience possible. I already created a component for that. Stay tuned.

One thought on “Embedding .NET videos with oEmbed

  1. Pingback: dotnetomaniak.pl

Leave a Reply

Your email address will not be published. Required fields are marked *