Plugin jQuery para OEmbed

30 mar. 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:


¿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:


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.

<oembed> 
<version>1.0</version> 
<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> 
<width>500</width> 
<height>430</height> 
<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á:

<oembed> 
  <type>video</type> 
  <version>1.0</version> 
  <provider_name>Vimeo</provider_name> 
  <provider_url>http://vimeo.com/</provider_url> 
  <title>When I Grow Up</title> 
  <author_name>Fever Ray</author_name> 
  <author_url>http://vimeo.com/feverrayvimeo</author_url> 
  <is_plus>1</is_plus> 
  <html></html> 
  <width>504</width> 
  <height>284</height> 
  <duration>235</duration> 
  <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:


¿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

Conclusión

Hemos liberado como código abierto nuestro primer plugin de jQuery para facilitaros la integración con la API OEmbed.

Recuerda que lo puedes descargar desde aquí:


Esperamos que os sea de utilidad, lo utilicéis en vuestros proyectos, y colaboréis para mejorarlo.





comments powered by Disqus
subir