02
Embedden wordt eenvoudiger met oEmbed
Posted by Timan Rebel | Posted in Open Web | Posted on 02-11-2009
Nu steeds meer platformen het embedden van video- en fotomateriaal mogelijk maken, rijst er een volgend probleem. Zoals altijd verzint iedereen zijn eigen manier om foto’s en video’s te embedden. Het is bij foto’s nog redelijk eenvoudig, maar een video embed je niet door middel van de URL van de pagina waar hij op staat. Dat levert al snel een API call op en die is bij elke partij weer anders.
oEmbed probeert dit nu te verhelpen. Door middel van een heel eenvoudige gestandaardiseerde API kun je van elk platform (dat oEmbed ondersteunt natuurlijk) achterhalen hoe een bepaalde video of foto moet worden geëmbed. Wordpress ondersteunt het als client al op de .com variant en vanaf versie 2.9 ook op de zelf gehoste versies. Vimeo, Youtube, Flickr, Hulu en binnenkort ook Mobypicture ondersteunen oEmbed al. Het is op Wordpress.com nu mogelijk om een Youtube video te embedden door enkel de URL van de videopagina te vermelden op een lege reden. Eenstuk eenvoudiger dan de embed code kopieren, die 9 van de 10 keer wordt geweigerd door het proces wat HTML uit je tekst haalt (uit veiligheidsoverwegingen).
oEmbed werkt eenvoudig. Je roept een URL aan en krijgt een stukje XML of JSON terug, waarin oa de titel, auteur, url van de auteur, natuurlijk vooral de HTML staat waarmee je de video kunt tonen. De url van de API van oEmbed wordt genoemd in de meta html tags van een platform (waar ook de titel van een pagina en de css in de HTML wordt gedefinieerd) en ziet er als volgt uit:
http://flickr.com/services/oembed?url=http%3A//flickr.com/photos/bees/2362225867/
Waarbij het tweede gedeelte de URL is van de foto pagina waar de foto op Flickr op wordt getoond. De response zou dan kunnen zijn:
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <oembed> <version>1.0</version> <type>photo</type> <title>Bacon Lollys</title> <author_name>bees</author_name> <author_url>http://www.flickr.com/photos/bees/</author_url> <cache_age>3600</cache_age> <provider_name>Flickr</provider_name> <provider_url>http://www.flickr.com/</provider_url> <width>500</width> <height>375</height> <url>http://farm4.static.flickr.com/3040/2362225867_4a87ab8baf.jpg</url> </oembed>
In dit geval hebben we te maken met een foto en krijg je enkel de URL en niet de HTML voor het tonen van een foto terug. Kijkend bij Youtube zien we het volgende:
<?xml version="1.0" encoding="utf-8"?>
<oembed>
<provider_url>http://www.youtube.com/</provider_url>
<title>Jude Law: My Take On Peace Video Contest</title>
<html>
<object width="480" height="295"><param name="movie" value="http://www.youtube.com/v/-UUx10KOWIE&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/-UUx10KOWIE&fs=1" type="application/x-shockwave-flash" width="480" height="295" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</html>
<author_name>PeaceOneDay</author_name>
<height>295</height>
<width>480</width>
<version>1.0</version>
<author_url>http://www.youtube.com/user/PeaceOneDay</author_url>
<provider_name>YouTube</provider_name>
<type>video</type>
</oembed>
Door de inhoud van het HTML veld weer te geven, krijg je een keurige Youtube video te zien en dat door enkel de URL van de Youtube video pagina te kennen.
Wil je nog meer weten over oEmbed? Lees dan de officiele pagina van oEmbed eens.
