Cómo crear un reproductor de videos 360 con JavaScript usando Clappr

360 videos se entregan como archivo de vídeo regular o corriente. Por lo general, no funcionan como se espera en cualquier explorador, incluso en los navegadores más recientes, ya que se mostrará como un vídeo normal y el usuario verá toda la panorámica en un cuadro. Sin embargo, es mejor proporcionar al usuario la interfaz habitual que le permite arrastrar y ver todo el vídeo como hacen muchos reproductores de video hoy (FB, YouTube, etc.). El reproductor de vídeo interactivo mostrara sólo el campo de visión completo que el usuario está viendo.

En este artículo te mostraremos como implementar un reproductor de videos de 360 grados usando Clappr.

1. Incluye Clappr y el plugin de video 360

La unica librería que necesitarás para crear tu propio reproductor de video 360 es Clappr. Clappr es simplemente un reproductor multimedia extensible para la web. Clappr está aun bajo desarrollo sin embargo está listo para usarse en producción, eso quiere decir que puedes reportar errores y hacer pull-requests al proyecto.

Esta librería está disponible en NPM así que lo puedes instalar como una dependencia en tu proyecto usando el siguiente comando:

npm install clappr

Necesitarás instalar el plugin de video 360 en Clappr para que te permita reproducir videos en 360 fácilmente:

npm install clappr-video360

Finalmente, necesitarás simplemente incluir el archivo principal, es decir clappr.js y del plugin clappr-video360.min.js. De manera alternativa, si no usas un manager de paquetes, descarga la versión minificada de Clappr desde el repositorio aquí y la copia del plugin de video 360 aquí. Si solamente quieres probar la librería en tu proyecto, usa un CDN gratuito:

<!-- Incluye Clappr -->
<script src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"></script>

<!-- Incluye el plugin de video 360 -->
<script src="https://cdn.rawgit.com/thiagopnts/clappr-video360/master/dist/clappr-video360.min.js"></script>

Para más información y documentación de la librería Clappr, por favor visita el repositorio oficial en Github aquí. Para más información acerca del plugin de video 360, visita el repositorio en Github aquí. Incluir ambos archivos te añadira aproximadamente 185KB de tamaño a tu página.

2. Configurando el reproductor de video 360

La implementación de un reproductor de videos 360 con JavaScript y Clappr es sumamente sencillo, necesitarás al menos proveer la URL del video que deseas reproducir en la opción source y el ID del elemento DIV donde el reproductor será creado. Lo anterior crearía un reproductor de video básico, pero aun no reproduce 360. Para ellos necesitarás inyectar el plugin en el contenedor como se muestra en el siguiente código.

Los siguientes ejemplos muestran como implementar un reproductor de video 360 básico en el explorador con VanillaJS ó con la ayuda de módulos (require) si usas un Bundler (webpack, browserify etc):

A. Con VanillaJS (JavaScript plano en el explorador)

// La URL a tu video 360
var Video360Url = 'video360.mp4';

// Configura tu reproductor de manera básica
var PlayerInstance = new Clappr.Player({
    source: Video360Url,
    plugins: {
        container: [Video360],
    },
    parentId: '#player',
});

// Importante desactivar el plugin nativo de click para pausar de clappr
// de otra manera no podrás usar comodamente el reproductor
PlayerInstance.getPlugin('click_to_pause').disable();

El plugin crea una variable global en la variable window llamada Video360 que necesita ser inyectada como un plugin en Clappr.

B. Usando bundlers de módulos

Si trabajas con bundlers de módulos como Webpack, necesitarás acceder a cada módulo usando require como se muestra en el siguiente ejemplo:

// requerir los módulos
var Clappr = require("clappr");
var Video360 = require("clappr-video360");

// La URL a tu video 360
var Video360Url = 'video360.mp4';

// Configura tu reproductor de manera básica
var PlayerInstance = new Clappr.Player({
    source: Video360Url,
    plugins: {
        container: [Video360],
    },
    parentId: '#player',
});

// Importante desactivar el plugin nativo de click para pausar de clappr
// de otra manera no podrás usar comodamente el reproductor
PlayerInstance.getPlugin('click_to_pause').disable();

Nota

No tienes un video en 360 para probar el reproductor? Descarga alguno de los videos en 360 gratuitos de Vimeo aquí.

Ejemplo final

El siguiente documento crea un reproductor de videos 360 básico usando un CDN gratuito, puedes simplemente copiar el código y ejecutarlo en un servidor local. Allí solamente necesitarás reemplazar la URL del video en 360 y ya está:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Clappr Video360</title>
    </head>
    <body>
        <!-- 1. Crea un elemento DIV donde será creado el reproductor -->
        <div id="player"></div>

        <!-- 2. Incluye Clappr y el plugin de video 360 -->
        <script src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"></script>
        <script src="https://cdn.rawgit.com/thiagopnts/clappr-video360/master/dist/clappr-video360.min.js"></script>

        <!-- 3. Configurar reproductor de video-->
        <script>
            // La URL al video 360
            var Video360Url = 'video360.mp4';

            // Configura el reproducotr clappr
            var PlayerInstance = new Clappr.Player({
                source: Video360Url,
                plugins: {
                    container: [Video360],
                },
                parentId: '#player',
            });

            // Importante desactivar el plugin nativo de click para pausar de clappr
            // de otra manera no podrás usar comodamente el reproductor
            PlayerInstance.getPlugin('click_to_pause').disable();
        </script>
    </body>
</html>

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable