oEmbed–3rd Party Content (Video/Bilder/…) auf die eigene Seite einbetten

Content von anderen Seiten, z.B. YouTube, Flickr, Slideshare auf die eigene Seite einzubetten ist auf den ersten Blick immer nur schwer möglich. Insbesondere wenn man dies “automatisiert” anhand der URL machen möchte. Wie die Einbettung erfolgt hängt stark vom Content ab – bei YouTube und co. muss ein Videoplayer zum Einsatz kommen, Slideshare und co. nehmen Flash/JS für die Präsentationen. Allerdings gibt es einen Standard, welche genau diesen Fall abdecken möchte: oEmbed.

Ziel von oEmbed

oEmbed soll eine einheitliche Schnittstelle sein, über den der eigene Content von anderen Seiten eingebettet werden kann. Es gibt einige große Namen, welche oEmbed unterstützen, darunter YouTube und Flickr:

Beispiel Flickr:

Der Client ruft diese URL auf:

http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/

Und bekommt als Antwort:

{
	"version": "1.0",
	"type": "photo",
	"width": 240,
	"height": 160,
	"title": "ZB8T0193",
	"url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
	"author_name": "Bees",
	"author_url": "http://www.flickr.com/photos/bees/",
	"provider_name": "Flickr",
	"provider_url": "http://www.flickr.com/"
}

Beispiel YouTube:

Aufruf:

http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json

Antwort:

{
	"version": "1.0",
	"type": "video",
	"provider_name": "YouTube",
	"provider_url": "http://youtube.com/",
	"width": 425,
	"height": 344,
	"title": "Amazing Nintendo Facts",
	"author_name": "ZackScott",
	"author_url": "http://www.youtube.com/user/ZackScott",
	"html":
		"<object width=\"425\" height=\"344\">
			<param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param>
			<param name=\"allowFullScreen\" value=\"true\"></param>
			<param name=\"allowscriptaccess\" value=\"always\"></param>
			<embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"
				type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
				allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
		</object>",
}

Insbesondere bei dem YouTube Beispiel kommt die Idee zum Tragen: Im HTML Property steht der komplette Code zum Einbinden des YouTube Players.

oEmbed Rückgaben

Laut Standard kann als Ergebnis entweder XML oder JSON zurückkommen, allerdings ist heute JSON eher gebräuchlich. YouTube unterstützt aber z.B. beides.

jQuery oEmbed Bibliothek

Es gibt auch eine jQuery Bibliothek um diese Services abzufragen. Dabei wird auf JSONP zurückgegriffen.

embed.ly – oEmbed Hub

Durch oEmbed ist das Format vorgegeben, jedoch muss man trotzdem dutzende Provider einzeln anfragen und die entsprechenden URLs wissen. Mit dem Dienst embed.ly kann man auch auf eine Art “Hub” zurückgreifen. Embed.ly stellt einen oEmbed Endpunkt bereit und man kann “fast” jede Adresse an embed.ly senden und man bekommt meist eine passende Antwort.

embed.ly selbst kann einfach über das jQuery Plugin angesprochen werden.

embed.ly – Kostenpunkt

embed.ly hat allerdings auch einen Haken: Es ist nicht kostenlos. Es gibt allerdings einen kostenfreien Account-Typ (nach unten scrollen!). Über diesen Account kann man monatlich 10.000 Aufrufe machen. Danach sind die Preise gestaffelt.

Für wen ist embed.ly und oEmbed interessant?

Allen voran ist die offensichtlichste Nutzung bei “Link-Sharing” Seiten wie Digg.com etc. Allerdings bekommt man auch über die pure URL ein paar Meta-Informationen raus, sodass man sich u.a. auch die Anbindung an eine komplexe API sparen kann.

Selbst ausprobieren auf embed.ly

embed.ly stellt ein “Test-Client” bereit über den man ein Gefühl dafür bekommt, welche Ergebnisse man erwarten kann.

About the author

Written by Robert Mühsig

Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.