¡Solo un aviso! Publicamos esta publicación en 2014, y el código (así como el diseño de la página de inicio al que hacemos referencia) ya no está disponible en nuestro sitio.
Nuestra página de inicio cambia con bastante regularidad, y una iteración incluyó un fondo de video de pantalla completa con un solo llamado a la acción para ver un video de pantalla completa.
Teníamos muchas ganas de mostrar nuestro producto y poner el video al frente y al centro, ya que es muy importante para nosotros (como compañía de videos).
En esta publicación, le mostraremos cómo puede lograr el mismo efecto de pantalla completa con su video alojado en Wistia, junto con algunas consideraciones que debe tener en cuenta al usar un video de fondo como este.
Advertencia: ahora estás entrando en territorio experimental.
Esta publicación pretende servir como ejemplo para los desarrolladores que buscan probar cosas nuevas con Wistia. Esperamos que sea útil, pero no podemos ofrecer soporte en torno a este contenido experimental si algo falla. ¡Busque la ayuda de un desarrollador experimentado si tiene problemas! ¿Quieres hacer algunos experimentos por tu cuenta? ¡Consulte nuestra documentación para desarrolladores!
El código de nuestra página de inicio es muy parecido al código de cualquier otra página web que haya creado. Es una serie de elementos HTML superpuestos con un poco de magia Javascript. La página de inicio puede estar en tres estados diferentes durante la visita de un visitante.
Cuando un visitante carga la página por primera vez, intentamos cargar todos los activos lo más rápido posible. Dado que los videos no se cargan de inmediato, primero cargamos la miniatura del video para que el visitante tenga algo que ver. Un archivo de imagen simple puede cargarse en la página más rápidamente que una inserción de video completa. Puedes ver un ejemplo de esto en el siguiente diagrama. Las áreas verdes son transparentes, por lo que en este primer estado, el visitante no puede ver el video de fondo o el video superpuesto porque la miniatura del video bloquea su vista. Esto nos da tiempo para cargar el video y luego pasar al estado dos.
En el estado dos, cambiamos las posiciones del video de fondo y la miniatura del video. Una vez que el video cambia de posición para estar frente a la miniatura, comenzamos a reproducir el video. Esto crea el efecto de que el video se detuvo durante la carga. Sin estos dos pasos, nuestros visitantes solo verían un fondo blanco hasta que se cargue el video.
En el estado tres, el visitante ha hecho clic en el botón de reproducción y traemos el video superpuesto al frente de la pila. Esto bloquea la vista del texto y el botón de reproducción y hace que solo se pueda ver el video superpuesto. Cuando el visitante sale del video, la página vuelve al estado dos.
Ahora que hemos descrito los diferentes estados en los que puede estar nuestra página, hablemos sobre el código que necesitará para que las cosas sucedan.
Para comenzar, deberá crear un nuevo proyecto en su cuenta de Wistia. Sube un video que no tenga sonido para tu video de fondo. En la sección Controles de Personalizar, habilite “Reproducción automática de video al cargar la página”, con el comportamiento del video al final establecido en “Repetir el video”.
El segundo video que necesita es el video superpuesto, que aparecerá cuando su visitante haga clic en el botón de reproducción. El video superpuesto no necesita ninguna personalización especial.
La segunda tarea que deberá realizar en Wistia es tomar nota de sus ID de video. Estos ID de video serán necesarios en algunos de los pasos a continuación y se pueden encontrar en la siguiente ubicación:
Por último, descargue la miniatura de su video de fondo y guárdela en la carpeta de imágenes. Puede hacerlo haciendo clic en “Descargar” en el menú “Acciones de video” en la página de su video en Wistia y seleccionando el archivo de imagen. Tus videos ahora están listos para ser incrustados en la plantilla de la página. A continuación, agregaremos estos videos a la plantilla HTML para que sus visitantes puedan verlos.
Si desea hacer su vida un poco más fácil, el repositorio de Github a continuación contiene el código de muestra que necesita para que este proyecto funcione rápidamente:
Primero, necesitará un contenedor básico para contener los dos videos, el texto y el botón de reproducción. Lo he presentado de manera muy similar a esto:
<div id="video_container">
<div id="text">
<div id="actions">
<div id="playbutton">
<div class="rectangle"></div>
<div class="triangle"></div>
</div>
</div>
</div>
<div id="cover_all"></div>
<div id="main-image"></div>
<div id="wistia_z1ggfo8f86" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
<div id="wistia_fji9juvptr" class="wistia_embed overlayVideo" style="width:1920px;height:1080px;"></div>
<div id="ex"><img src="images/ex.svg" width="23" height="23"></div>
</div>
El video de fondo está contenido en el div con la clase “backgroundVideo”, y el video que ocupa la pantalla en la ventana emergente está contenido en el div con la clase “overlayVideo”. Para que este fragmento funcione para sus videos (en lugar de los de Wistia), debe reemplazar las ID de video de muestra con las ID de video de las que tomó nota anteriormente. Mire el código de inserción de sus videos para encontrar las identificaciones que necesitará.
Por último, agregue el Javascript incrustado normal de Wistia, que impulsará los videos en su nueva página junto con el complemento Crop Fill de Wistia Labs.
Como puede ver, no hay mucho en el HTML. A continuación, hablaremos sobre el complejo Javascript que controla la apariencia de los videos en su sitio.
Javascript es realmente lo que hace posible este efecto de video de fondo, y también agrega algo de complejidad a su proyecto. Me aseguré de que el código esté bien comentado, pero intentaré analizar cada pieza principal con más profundidad aquí para demostrar lo que está sucediendo.
Lo primero que debe notar es un conjunto de 4 variables que deberá cambiar y definir con sus ID de video y los contenedores que contienen esos videos. El fragmento de código que necesita cambiar se ve así:
overlayVideo: 'fji9juvptr', overlayVideoDiv: '#wistia_fji9juvptr', backgroundVideo: 'z1ggfo8f86', backgroundVideoDiv: '#wistia_z1ggfo8f86',
Con ese cambio, no debería tener que tocar el resto del Javascript a menos que desee personalizarlo para su uso. Ahora que las cosas simples están fuera del camino, comencemos a hablar sobre lo que está haciendo el resto de Javascript.
embedVideo: function() {
var videoOptions = {};
// Add the crop fill plugin to the videoOptions
Wistia.obj.merge(videoOptions, {
plugin: {
cropFill: {
src: "//fast.wistia.com/labs/crop-fill/plugin.js"
}
}
});
// Video in the background
wistiaEmbed = Wistia.embed(fullScreenVideo.backgroundVideo, videoOptions);
// Video to be shown in the overlay
overlayEmbed = Wistia.embed(fullScreenVideo.overlayVideo, videoOptions);
// We load the thumbnail in the background while we wait
// for the video to load and play. Once loaded, we pause, reset to
// frame zero, show the video then play it.
wistiaEmbed.bind('play', function() {
wistiaEmbed.pause();
wistiaEmbed.time(0);
$(fullScreenVideo.backgroundVideoDiv).css(’visibility’, ’visible’);
wistiaEmbed.play();
return this.unbind;
});
}
La función incrustar video hace algunas cosas diferentes que son importantes para esta página. Primero, configura videoOptions, que contiene el complemento Crop Fill de Wistia Labs. Este complemento se asegurará de que su video llene la ventana del navegador.
// Add the crop fill plugin to the videoOptions
Wistia.obj.merge(videoOptions, {
plugin: {
cropFill: {
src: '//fast.wistia.com/labs/crop-fill/plugin.js'
}
}
});
A continuación, inicializamos las dos incrustaciones que tenemos en la página, asegurándonos de incluir las opciones que acabamos de definir con el complemento Crop Fill.
// Video in the background wistiaEmbed = Wistia.embed(fullScreenVideo.backgroundVideo, videoOptions); // Video to be shown in the overlay overlayEmbed = Wistia.embed(fullScreenVideo.overlayVideo, videoOptions);
Por último, esperamos a que se cargue el vídeo de fondo y empecemos a reproducirlo. Dado que ese video está detrás de la imagen en miniatura, debemos reorganizar los divs para que se reproduzca el video. Hacemos esto uniéndonos a la acción de reproducción del video de fondo que está configurado para reproducirse automáticamente. Cuando el video comienza a reproducirse, lo pausamos, restablecemos el cuadro a cero, hacemos que el video sea visible y luego lo reproducimos. Si no pausamos el video y lo restablecemos al cuadro cero, verá un movimiento extraño cuando cambiamos al video. Pausar el video permitirá que el visitante no note el cambio de miniatura a video porque son una coincidencia exacta.
wistiaEmbed.bind('play', function() {
wistiaEmbed.pause();
wistiaEmbed.time(0);
$(fullScreenVideo.backgroundVideoDiv).css('visibility', 'visible');
wistiaEmbed.play();
return this.unbind;
});
La función playVideo se llama cuando el visitante hace clic en el botón de reproducción. Nos aseguramos de que el video sea visible y que llene la ventana del navegador. Después de comprobar que el texto y el botón de reproducción están ocultos, reproducimos el vídeo superpuesto.
playVideo: function() {
$(fullScreenVideo.overlayVideoDiv).css('left', 0).css('visibility', 'visible');
overlayEmbed.plugin.cropFill.resize();
$('#text').css({ opacity: 0 });
$('#ex').css('right', 24);
overlayEmbed.play();
}
La función exitVideo hace exactamente lo contrario de la función playVideo. Hacemos una pausa en el video, ocultamos el video y hacemos visible el texto y el botón de reproducción. Como pausamos el video, comenzará en el mismo lugar si el visitante decide presionar reproducir nuevamente.
exitVideo: function() {
$(fullScreenVideo.overlayVideoDiv).css('left', -3000).css('visibility', 'hidden');
$("#ex").css('right', -3000);
$("#text").css({ opacity: 1 });
overlayEmbed.pause();
overlayEmbed._keyBindingsActive = false;
}
La función fixTextPosition se asegura de que el botón de reproducción y el texto incluidos en ese contenedor estén centrados vertical y horizontalmente en la página. También tenemos un enlace más adelante que vinculará esta función cuando el visitante cambie el tamaño de la página. Esta función se encarga de que el botón de vídeo y reproducción esté siempre centrado en la ventana.
En general, este Javascript se ocupa de una gran cantidad de tareas que realmente hacen que la página se una. Ahora que los elementos están en su lugar que controlan cómo funcionan los videos, nos centraremos en cómo se diseña la página con CSS.
El código CSS es algo que no tendrá que cambiar en absoluto, a menos que agregue algo de su propio texto o ajuste las ID o clases de los divs.
Lo único que puede que tenga que cambiar es el nombre de su imagen de fondo. Si cambió el nombre del archivo, cambie el CSS que se encuentra aquí:
.hello #main-image {
position: absolute;
top: 0;
left: 0;
z-index: 3;
background-image: url(../images/main.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
Una cosa importante para recordar es que estamos colocando divs encima de divs usando posicionamiento e índices z. Ahí es donde el diagrama en la introducción entra en juego para comprender cómo Javascript baraja esos divs.
Con los ajustes de este CSS, deberías tener una página completa que cargue tus videos.
En el camino, hemos encontrado algunas consideraciones y trucos diferentes que queríamos llamar su atención para ayudar a que la experiencia para usted y sus visitantes sea excelente.
Tiempo de carga
Los videos en la web no se cargan de inmediato, por lo que antes de que se reproduzca el video, debe cargar una imagen fija del primer cuadro para que los espectadores no encuentren un fondo blanco mientras se carga el video. Esto creará la ilusión de que el video está en pausa mientras se procesa.
Vídeos cortos de fondo
Cuando su visitante cargue su página, el video de fondo completo se cargará desde Wistia. Si está utilizando un video de fondo largo y grande, consumirá una gran cantidad de ancho de banda en su cuenta. Para disminuir la cantidad de ancho de banda que consume cada visitante, seleccione un video que no dure más de 30 segundos.
Prepárate para el corte
Siempre trate de mantener sus sujetos principales dentro del 40% medio del marco, ya que las áreas en rojo a continuación son secciones que podrían recortarse. Esto asegurará que su video tenga sentido en una gran variedad de tamaños de ventana.
Visitantes móviles
La implementación descrita aquí no no trabajar con dispositivos móviles como iPhones, dispositivos Android y iPads. Muchos fabricantes de dispositivos móviles (como Apple) no permiten la reproducción automática de videos para ayudar a las personas a mantener el control sobre la cantidad de datos que usan en los planes de datos inalámbricos. Para el sitio de Wistia, detectamos si el espectador está usando un dispositivo móvil y cargamos una versión similar de la página como respaldo, usando una imagen de fondo estática en lugar del video. Cuando un visitante hace clic en la llamada a la acción, se muestra una inserción emergente de Wistia en lugar del video de pantalla completa.
Los ejemplos de código que compartí anteriormente no incluyen cómo crear un respaldo móvil, ya que depende de su base de código y de cómo se crea su aplicación. ¡Busque la ayuda de un desarrollador si quiere probar algo similar!
Prueba, prueba, prueba
Si bien los fondos de video pueden agregar un efecto genial a su sitio web, también pueden distraer la atención del objetivo final que tiene para sus visitantes.
Si tiene llamadas a la acción en las páginas con su nuevo fondo de video, asegúrese de probarlas con una página de fondo estática que no sea de video. Lo último que desea hacer es lanzar algo que genere mucha atención pero que reduzca la tasa de conversión o la efectividad de su página.
También sugiero probar el fondo del video para ver si diferentes videos tienen diferentes efectos en sus visitantes. Al igual que cualquier página de su sitio web, siempre debe continuar ajustando y probando.
Los videos de fondo pueden agregar un toque único a su sitio web y poner su producto al frente y en el centro para los visitantes. Con los ejemplos de código y los consejos anteriores, debería estar en camino de crear una experiencia distinta para sus visitantes.
