Cómo reproducir vídeos al pasar el ratón por encima en Webflow

Aprenderás:
👉 Incrustaciones de código personalizado en Webflow
👉 jquery en Webflow
👉 Atajos en Webflow
👉 Manipulación básica del DOM con JavaScript

Cómo hacer que tu vídeo sólo se reproduzca al pasar el ratón por encima

¿Te has encontrado alguna vez con un sitio web en el que un vídeo empieza a reproducirse automáticamente, y tienes que pelearte para pausarlo? ¿O quizás quieres añadir un poco más de interactividad a tu sitio web y hacer que un vídeo sólo se reproduzca cuando alguien pase el ratón por encima? En este tutorial, te mostraremos cómo hacer precisamente eso con un poco de código.

Introducción

Hola, soy Marvin Aziz, desarrollador autónomo, y en este tutorial te mostraré cómo añadir un efecto hover suave a tu vídeo. Reemplazaremos una imagen en el centro de un diseño que he creado previamente por un vídeo que sólo se reproduce al pasar el ratón por encima.

Requisitos previos

Antes de empezar, necesitarás algunos conocimientos básicos de HTML, CSS y JavaScript. No te preocupes si no eres un experto, te guiaremos paso a paso.

Pasos a seguir

¡Vamos a sumergirnos!

1. Elimina la imagen donde quieras que aparezca el vídeo.
2. Busca el elemento incrustado y sustitúyelo por el elemento de vídeo.
3. Añade un div wrapper llamado "hover video wrapper" y coloca el elemento de vídeo dentro de él.
4. Pon el vídeo en bucle y cárgalo previamente. Además, asegúrate de que está silenciado inicialmente.
5. Aloja el vídeo en un sitio web. (Nota: Alojar vídeos en Webflow puede ser complicado).
6. Abre la configuración de tu página y desplázate hasta la etiqueta head y body.
7. Copia y pega el código JavaScript en la etiqueta body.
8. Modifica el código si quieres utilizar varios vídeos.
9. Recorre en bucle todos los vídeos de la página y añade escuchadores de eventos.
10. Comprueba si el ratón está encima del vídeo.
11. Si el ratón está encima del vídeo, reproduce el vídeo.
12. Si el ratón se desplaza fuera del vídeo, ponlo en pausa y registra el momento en que se reprodujo por última vez.
13. Publica tu sitio web y comprueba el resultado final.
14. ¡Celébralo!

Explicación del código

Vamos a desglosar el código JavaScript paso a paso.

Primero, el código obtendrá todas las secuencias de vídeo de la página. A continuación, hará un bucle sobre todos los vídeos y añadirá escuchadores de eventos. El receptor de eventos comprobará si el ratón está encima del vídeo. Si lo está, el vídeo se reproducirá. Si el ratón se mueve fuera del vídeo, éste se detendrá y se reanudará desde donde se quedó la próxima vez que se reproduzca. El resultado es una experiencia fluida y sin interrupciones para los visitantes de tu sitio web.

Conclusión

¡Y ya está! Has añadido con éxito un efecto hover a tu vídeo utilizando unas pocas líneas de código. Ahora puedes atraer a los visitantes de tu sitio web con interactividad y mantenerlos enganchados a tu contenido. Gracias por leer, y espero que este tutorial te haya sido útil.

Preguntas frecuentes

1. ¿Puedo utilizar este código en varios vídeos de mi sitio web?
   Sí, puedes. Sólo tienes que reproducir en bucle todos los vídeos que quieras utilizar con este efecto.

1. ¿Puedo modificar el código para adaptarlo a mis necesidades específicas?
   ‍¡Por supuesto! Puedes personalizar el código para adaptarlo a tus necesidades.
2. ¿Qué pasa si quiero que el vídeo empiece a reproducirse al hacer clic en lugar deal pasar el ratón por encima?
   ‍Puedesmodificar el código para añadir un receptor de eventos para un clic en lugar de para pasar el ratón por encima.
3. ¿Este código es compatible con todos los navegadores?
   ‍Estecódigo funciona en la mayoría de los navegadores modernos, incluidos Chrome y Firefox.
4. ¿Qué pasa si mi vídeo no se reproduce con fluidez?
   Puede haber muchas razones por las que tu vídeo no se reproduzca con fluidez, como una velocidad de Internet lenta o un archivo de gran tamaño. Intenta comprimir tu vídeo y alojarlo en un servidor más rápido.

🧑🏾‍💻 Enlace al fragmento de código mencionado:
‍https://bit.ly/37lXgJQ

Realmente espero que este vídeo te ayude a hacer que tu sitio web Webflow sea aún más único. Si quieres aprender más efectos Hover en Webflow, echa un vistazo a mi lista de reproducción
⏩ Playlist for Webflow Basics:

https://www.youtube.com/watch?v=eXar9ckY57w&list=PLBpotogQWwtvdmcK7L7OnFHDgDdZJ-ZEH