POPCORN.JS: GOOGLE MAPS Juanma Rueda Gallo Producción y dirección Multimedia 4º CAV - UVIC
Índice Introducción...3 Google Maps...4 Ejemplo del código...5 Ejemplos...7
Introducción Para entrar en materia necesitamos definir y tener claro los conceptos sobre los que vamos a trabajar. Para empezar HTML5 es la evolución del código o lenguaje HTML, el cual funciona a partir de una serie de etiquetas invariables que nos ofrecen múltiples oportunidades para crear nuestras páginas webs, cómo por ejemplo ordenar elementos (<div>) o ponerlos disponibles online (<href>). HTML5 nos ofrece nuevas prestaciones como la posibilidad de manejar video y audio como una etiqueta propia del código, sin la necesidad de trabajar con plugins adicionales como por ejemplo Flash. Aquí es donde toma protagonismo Popcorn.js. Se trata de una librería multimedia en código abierto, escrito en javascript para HTML5 por la fundación Mozilla, que nos permite sincronizar elementos adicionales con la etiqueta video o audio de HTML5. Resumiendo, Popcorn.js nos permite sincronizar dentro de una misma página Web video y otros elementos como enlaces o textos de la Wikipedia relacionados con el video, localizaciones de videos en Google Maps, tanto vista satélite como Street View, citas en Twitter, y gran variedad de enlaces a diferentes tipos de información en relación al video en cuestión. Todos estos elementos adicionales con los que trabaja Popcorn.js son plugins. Para que quede todo más claro vamos a ejemplificar tanto con imágenes cómo con el código.
Google Maps El plugin de Google Maps para Popcorn nos ofrece todo su rendimiento al máximo. Podemos hacer zoom, vista de mapa de ruta, vista satélite, con relieve, con información adicional, fotos, temperaturas, e incluso se puede ver imágenes en Google Street View. Para conseguir incluir esta información adicional para nuestros videos online podemos optar por dos vías: a través del código que nos ofrecen libremente en la página de Popcornjs.org o a través de Popcorn Maker, una aplicación en fase de pruebas Alpha, la cual falla con mucha frecuencia y no conseguimos el resultado deseado. De todas formas la aplicación promete grandes resultados cuando esté avanzada, ya que funciona de una manera muy intuitiva y visual, como cualquier otro editor de video doméstico pero con otras prestaciones para mejorar la experiencia del usuario como la de en este caso Google Maps.
EJEMPLOS DEL CÓDIGO Primero nos aseguramos de cargar la página (DOM) <!doctype html> <html> <head> <script src="http://popcornjs.org/code/dist/popcorncomplete.min.js"></script> <script> document.addeventlistener("domcontentloaded", function () { Después creamos una instancia a popcorn llamando a nuestro Popcorn (#nombre-denuestro-video) var pop = Popcorn("#ourvideo"); Añadimos el comando del mapa donde primero tendremos que escoger, en start: el segundo en el que queremos que aparezca este elemento y en end: el segundo en el que queremos que desaparezca. pop.googlemap({ start: 2, end: 6, Seguido, añadiremos el tipo de mapa que queremos que aparezca en type:, en este caso será Streetview, además del target: googlemap, la localización deseada en location:, que puede ser dada por coordenadas, aproximaciones, direcciones exactas o simplemente nombres de localidades o ciudades, y además también ajustaremos el zoom a nuestro gusto con zoom:. type: "STREETVIEW", // target: "googlemap", location: "New York", zoom: 1 }); Acto seguido colocamos el video // play the video right away pop.play(); }, false); </script> </head> <body> <video height="180" width="300" id="ourvideo"> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source> <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source> </video> <div id="googlemap"></div> </body> </html> Y el resultado en pantalla es el siguiente: 1 2 3
Ejemplos Otros ejemplos interesantes de cómo se ha aplicado Popcorn a trabajos documentales on-line son: History in These Streets http://bavc.org/sites/live/files/factory/historyinthestreets/index.html Un documental sobre el partido racial Panteras Negras de los Estados Unidos, en el cual a partir de una narración en audio y fotos acompañadas de texto, utiliza Google maps como base en vez de video, para situarnos geográficamente y mostrarnos localizaciones importantes como los primeros puntos de reunión de esta organización.
Scooter and The Big Man http://scooterandthebigman.org/index.html Documental homenaje al legendario saxofonista de Bruce Springsteen. La base del documental son fragmentos de actuaciones y entrevistas que se encuentran en diferentes videos de Youtube y aparecen en forma de fotografía Polaroid mapas de las zonas en las que ocurrieron los hechos o fotografías de los protagonistas. Estas Polaroid van apareciendo por la pantalla y desapareciendo, igual que los videos, pero puedes interactuar con las fotografías y mapas y cambiarlos por la pantalla, según te interese más una información u otra. El mayor problema es que no hay una línea del tiempo y si quieres ver toda la información que aparece es imposible pausar o retroceder.