Scroll to play: cómo auto-reproducir vídeos
La técnica de scroll-to-play es ampliamente utilizada actualmente por muchas páginas Web, entre las que se encuentra Facebook con su auto-reproducción de vídeos. Es una buena manera de captar la atención de los usuarios de una página, ya que cuando tienen el vídeo en pantalla se reproduce automáticamente. Javier Gonzáles, uno de nuestros lectores, nos mandó hace tiempo un proyecto que él mismo había desarrollando tras haber obtenido los conocimientos necesarios gracias a los tutoriales de Geeky Theory.
Tenemos el código disponible en su repositorio de GitHub, donde podemos verlo o seguir desarrollándolo, además de un ejemplo en el que nos encontramos con la prueba de que funciona perfectamente. Cuando hacemos scroll y el vídeo aparece en la pantalla, comienza a reproducirse. Cuando desaparece de nuestra vista se para, recordando el momento de la reproducción en el que nos hemos quedado.
Cómo usarlo en una Web
Como podemos ver en el código, si queremos utilizarlo en nuestra página Web tendremos que hacer tres imports de código Javascript:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="jquery.visible.js"></script> <script type="text/javascript" src="scrolltoplay.js"></script>
Tras esto, si queremos insertar un vídeo, simplemente introducimos la URL del vídeo dentro del atributo src de un iframe, tal y como se ve en el código de ejemplo.
Esto es todo. Me gustaría aprovechar este artículo para deciros que si tenéis algún proyecto interesante como este, nos lo podéis mandar a través del formulario de contacto para que le echemos un vistazo y quizá publicar un artículo sobre él.
¡Saludos!