Plugin jQuery para OEmbed

30 marzo de 2009

¿Qué es OEmbed?

OEmbed es una API que implementan algunos sitios web como Flickr o Vimeo para facilitar incrustar sus recursos - vídeos, imágenes o contenidos multimedia - en tu página web.

Puedes encontrar más información sobre su funcionamiento y los proveedores que lo soportan en su página oficial:

http://www.oembed.com

¿Cómo funciona OEmbed?

Básicamente consiste en ofrecer un método REST que al llamar a una URL que indica el servicio, esta devuelve en formato JSON o XML la información necesaria para incrustar el recurso.

Por ejemplo, si quisiéramos mostrar la imagen de esta URL:

http://www.flickr.com/photos/14516334@N00/345009210/

Tendríamos que seguir un complicado proceso para conseguir el enlace correcto o bien utilizar algunos métodos particulares de Flickr para conseguir el enlace a la imagen deseada.

Sin embargo, podemos utilizar OEmbed para pedir eso datos de forma unificada tanto en Flickr como en otros proveedores.

Este ejemplo de Flickr con OEmbed, nos devuelve la información del recurso que se hace referencia en la url que pasamos como parámetro.

<type>photo</type>

<title>Lift Off- Best Viewed Large</title>

<author_name>aussiegall</author_name>

<author_url>http://www.flickr.com/photos/aussiegall/</author_url>

<cache_age>3600</cache_age>

<provider_name>Flickr</provider_name>

<provider_url>http://www.flickr.com/</provider_url>

<url>http://farm1.static.flickr.com/159/345009210_1f826cd5a1.jpg</url>

</oembed>

Si lo que queremos es un vídeo de Vimeo:

http://vimeo.com/3108686

Podemos hacer la petición a la API de OEmbed de esta forma:

http://vimeo.com/api/oembed.json?url=http://vimeo.com/3108686

Nos devolverá:

<type>video</type>

<provider_name>Vimeo</provider_name>

<provider_url>http://vimeo.com/</provider_url>

<author_name>Fever Ray</author_name>

<author_url>http://vimeo.com/feverrayvimeo</author_url>

<is_plus>1</is_plus>

<thumbnail_url>http://images.vimeo.com/27/91/77/279177767/279177767_160.jpg</thumbnail_url>

<thumbnail_width>160</thumbnail_width>

<thumbnail_height>120</thumbnail_height>

<clip_id>3108686</clip_id>

</oembed>

Aunque el tipo de recurso que nos devuelven es distinto, flickr nos ofrece una foto y Vimeo un vídeo, ofrecen una respuesta con información similar. Para incrustar estos recursos bastará con utilizar la URL en el caso de flickr y el código HTML en el cado de Vimeo.

jQuery OEmbed Plugin

Estamos trabando en un proyecto en el que se podrán añadir recursos externos de forma muy sencilla, entre otras cosas gracias a OEmbed. Por eso nos hemos decidido en desarrollar este plugin de jQuery y liberarlo como código abierto para que lo utilice y mejor quien quiera.

Puedes encontrar la página del proyecto en Google Code:

http://code.google.com/p/jquery-oembed/

¿Cómo utilizar jQuery OEmbed?

Lo primero es incluir los scripts necesarios en tu página html:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>

Añadimos en el código HTML los DIVs que tendrán los contenedores

<div id="container1"></div>

<div id="container2"></div>

Y lo siguiente es llamar al plugin al cargar la página:

<script type="text/javascript">       
 $(document).ready(function() {               
   $("#container1").oembed("http://www.flickr.com/photos/14516334@N00/345009210/");
   $("#container2").oembed("http://vimeo.com/3108686");        
});</script>

¿Qué recursos puedo incrustar con este plugin?

jQuery OEmbed intenta utilizar las APIs de cada proveedor, pero no todos los proveedores ofrecen la opción de utilizar JSONP para realizar llamadas javascript entre dominios. Por suerte, el servicio oohEmbed.com nos proporciona una interfaz común incluso para webs que no ofrecen directamente el soporte a OEmbed de forma gratuita.

Aquí tienes un listado los recursos que puedes incrustrar:

Proveedor	Recurso
5min	Vídeo
Amazon	Imagen de un producto
Flickr	Imagen
Google Video	Vídeo
Hulu	Vídeo
IMDB	Imagen e información de la película
Metacafe	Vídeo
Qik	Vídeo
Revision3	Vídeo
SlideShare	Diapositivas
Twitpic	Imagen
Viddler	Vídeo
Vimeo	Vídeo
Wikipedia	Resumen del artículo de la wikipedia
Wordpress	Resumen de la entrada del blog
YouTube	Vídeo