Cada vez es más habitual encontrarnos con vídeos e imágenes en 180º o 360º que ofrecen diferentes perspectivas de lugares o entornos. Y aunque este tipo de contenidos están muy relacionados con las gafas de realidad virtual, también pueden insertarse en páginas web.

En la práctica, es casi lo mismo que insertar un vídeo o un iframe, solo que en este caso, tendremos que hacer algún pequeño paso más.

Para este proceso, Google ha desarrolado su propio código para que podamos insertar nuestro contenido, aunque por ahora, muy limitado, sin botones de control y carente de opciones. Aunque seguro que será algo que irá completando con el tiempo.

Lo primero que tenemos que hacer es incluir el script de Google con la siguiente línea:

Luego añadiremos un div, que será donde se incluirá nuestro vídeo.

Este div está vacío, ya que nuestro código se encargará de detectar el id del div, y meter dentro el iframe correspondiente.

A continuación añadiremos el script con las opciones. En este caso, solamente tenemos cuatro opciones, donde las importantes son video, width (anchura) y height (altura), donde añadiremos la url del vídeo y su tamaño en píxeles.

 


Como podéis ver en este ejemplo, el código inserta un iframe con las opciones que le hemos pasado y a partir de aquí tan solo quedaría personalizarlo para nuestra página, aunque como he comentado, poco más se puede hacer, ya que no disponemos de un botón de pausa, o de adelanto, o de volumen.

Mediante javascript tan solo tenemos acceso a parar el vídeo, y a dejarlo sin sonido. Con lo cual se podría crear dichos botones, fuera del iframe y controlarlo con código, algo no muy elegante.

Podéis ver todas las opciones y su implementación en el siguiente enlace: https://developers.google.com/vr/concepts/vrview-web
El código y ejemplos en GitHub: https://github.com/googlevr/vrview

También podéis encontrar un plugin en el repositorio de WordPress que se encarga de implementar este código: https://es.wordpress.org/plugins/wp-vr-view/

¿Y si quiero una opción más completa que la de Google? Pues en breve os comentaré de un reproductor gratuito que tiene muchas más opciones. Aunque eso sí, no es de código abierto.

Para cualquier duda, no dudéis en dejar un comentario.