10 mejores scripts JavaScript y plugins multimedia de 2019

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Elementos interactivos como el audio, el vídeo, los flipbooks, las galerías, los mapas, los temporizadores de cuenta regresiva y las ventanas emergentes aumentan el tiempo que los visitantes pasan interactuando con el contenido de tu sitio web. Ayudan a crear excelentes experiencias de usuario.

Los scripts y plugins multimedia de JavaScript facilitan la vida y el engagement de tu sitio web. Entre estos se incluyen plugins de vídeo, audio y PDF que puedes consultar en algunos de nuestros otros artículos.

En este artículo te mostraré algunos otros tipos de scripts interactivos disponibles en CodeCanyon que podrían animar tu sitio.

¿Por qué usar un script o un plugin multimedia?

Existen muchos tipos de medios. Imaginemos que deseas que los visitantes de tu sitio web rellenen un formulario de encuesta que aparece cuando navegan por tu página. O quieres que los usuarios busquen las ubicaciones de tus tiendas y descubran cómo llegar a ellas.

Los tipos más comunes de medios interactivos son los mapas, el audio, el vídeo, los flipbooks y elementos interactivos como encuestas, ventanas emergentes y temporizadores. Son una parte indispensable del contenido del sitio web. Una buena combinación de estos impulsará la participación del cliente.

Pero imagina tener que codificar manualmente cada elemento multimedia interactivo: cada reproductor de vídeo, cada reproductor de audio, flipbook, mapa o temporizador de cuenta atrás.

Aquí es donde resulta útil un script. Un script JavaScript o plugin es un fragmento de código que puedes instalar en un sitio web para añadir funcionalidad. Los scripts multimedia te permiten compartir e incrustar medios como vídeo, audio, elementos interactivos u otros contenidos multimedia, además de libros, revistas o catálogos en forma de flipbooks.

Echemos un vistazo a algunos de los mejores scripts JavaScript multimedia disponibles en CodeCanyon.

¿Qué es un script?

Un script es un fragmento de código que realiza una determinada tarea o añade una característica a tu sitio web. Los scripts contienen un conjunto de instrucciones que automatizan los procesos en un sitio web.

Los scripts funcionan en segundo plano, donde los visitantes no pueden verlos, para que tu sitio web sea flexible y usable. El script se inicia automáticamente cuando se carga la página y continúa ejecutándose mientras la página permanezca abierta. Sólo tienes que instalarlo y ya está listo para funcionar. Lo bueno es que puedes añadir funciones avanzadas a tu sitio web sin necesidad de saber escribir código.

Cómo elegir un script o un plugin multimedia

Los scripts JavaScript y los plugins multimedia de CodeCanyon son muy asequibles y fáciles de usar. Todo lo que necesitas hacer es descargar el script e instalarlo en tu sitio web. El script hará todo el trabajo en segundo plano para que tu vídeo, audio, flipbook u otros medios funcionen sin problemas y sin ralentizar tu sitio web.

No sólo eso, sino que como están construidos teniendo la presentación en mente, ofrecen una variedad de plantillas fáciles de usar entre las que puedes elegir para mejorar el aspecto de tu sitio web.

Entre las cosas a tener en cuenta se incluyen las siguientes:

Facilidad de uso: Esto incluye la facilidad de descarga e instalación, lo fácil que sea cargarlo y cambiar el tamaño del vídeo y adaptarlo a varios tamaños de pantalla.

Altamente personalizable: Un script debe permitir que la personalización se ajuste perfectamente a cualquier tema que elijas para tu sitio web.

Compatibilidad entre navegadores: No todas las personas que visitan tu sitio web utilizan Google Chrome o Mozilla. Asegúrate de que tu script sea compatible con cualquier navegador que tus visitantes puedan usar.

Compatibilidad entre dispositivos: un script debe funcionar sin problemas en equipos de escritorio, portátiles, tabletas y teléfonos móviles. No solo eso, además el script debe ser responsivo, lo que significa que debe poder adaptarse a varios tipos de dispositivos, anchuras, alturas, orientaciones, resoluciones, proporciones y profundidades de color.

Soporte total para gestos táctiles: El script debe ser usable por dispositivos móviles con pantallas táctiles.

Ligero: El archivo debe ser ligero para que los medios se inicialicen y carguen rápidamente sin ralentizar el sitio web.

Independiente: No debería haber necesidad de descargar plugins de terceras partes como Flash para que el script funcione. Sin embargo, ten en cuenta que es común que los scripts necesiten bibliotecas habituales como jQuery.

Echemos un vistazo a algunos de los scripts JavaScript multimedia más populares disponibles en CodeCanyon.

1. Interactive Maps Generator

Interactive Maps Generator es un potente plugin que utiliza la poderosa API Geochart de Google que crea mapas vectoriales en formato SVG. Es compatible con Wix, SquareSpace, Joomla y otros CMSs que te permiten pegar código JavaScript en el contenido.

Esto es lo que puedes hacer con Interactive Maps Generator:

Generar tantos mapas como desees
Incrustar el código para colocar mapas en cualquier parte del contenido de tu sitio web

Puede crear mapas para tu sitio web en los que se puede hacer clic, incluido un mapa de Los EE.UU., un mapa del mundo o cualquier otra región disponible. Esto es solo el comienzo, puedes añadir regiones de color activas al mapa y puedes añadir interactividad a las regiones activas. También podrás personalizar los elementos visuales de tus mapas: el color de fondo, el ancho y el color del borde del cuadro, el color de las regiones inactivas, y el ancho y el alto del mapa.

Esto es lo que el usuario NPCAComms comenta sobre Interactive Maps Generator

El mejor dinero que he gastado. Un diseño fácil de usar y nítido. Estoy satisfecho al 100% con este generador de mapas

2. Native Web Radio Player Plugin

Si estás buscando un plugin de radio web nativo de Internet basado en el navegador e independiente que te permita emitir rápidamente streams de radio multiplataforma en tus páginas web, entonces Native Web Radio Player es la opción perfecta.

Está escrito en JavaScript y es compatible con iOS, Android y todos los navegadores HTML5. También está optimizado para tener muy buen aspecto tanto en equipos de escritorio como en tabletas y en dispositivos móviles.

Puedes crear cualquier esquema de color para que sea fácil integrarlo en cualquier diseño. Es compatible con shoutcast2, icecast2, radionomy, radiojar y muchos otros servidores.

Echa un vistazo a la vista previa en vivo y averigua por qué el usuario ThomasUber opina lo siguiente:

El mejor plugin de radio de la historia. Funciona de forma muy estable y rápida.

3. WowBook: un plugin jQuery para flipbooks

WowBook ayuda a convertir tus fotos y archivos PDF en libros interactivos o presentaciones de diapositivas.

Viene con 3 plantillas listas para usar que podrás personalizar fácilmente. Tiene 2 efectos realistas de pase de página uno para cubiertas duras y otro para hojas estándar de papel. Incluso reproduce un sonido al pasar de página en navegadores que admitan la etiqueta de audio.

WowBook es totalmente compatible con todos los principales navegadores. Esto significa que no es necesario descargar Flash, y tu flipbook podrá ser perfectamente visualizado por todos los visitantes de tu sitio web.

Y no solo eso, sino que además es totalmente responsivo: tiene funciones integradas para cambiar el tamaño del libro y hacerlo adaptable a diferentes dimensiones de pantallas. Viene con una barra de herramientas responsiva.

También se activa mediante el gesto de un pellizco o un doble clic para hacer zoom.

Esto es lo que dice el usuario anschinsan sobre WowBook:

Agradable y fácil de personalizar. Lo uso para varios clientes: están satisfechos y además lo he configurado en minutos. ¡Gracias por este plugin!

4. Touch N Swipe Gallery

Deseas llevar a otro nivel la forma en la que los usuarios pueden interactuar con las imágenes de tu tienda o tu sitio web, entonces Touch N Swipe Gallery es el plugin que deberías tener.

¿Quieres conocer algunos de los motivos del porqué?

Touch N Swipe Gallery plugin para móviles y equipos de escritorio es totalmente compatible con gestos táctiles. Los visitantes de tu tienda o sitio web pueden ver los elementos de cerca, basta con que sitúen el ratón sobre el contenido para hacer zoom en equipos de escritorio, y en dispositivos móviles permite pellizcar o arrastrar y deslizar sobre pantalla para hacer zoom.

Además, cuenta con la carga adaptativa de imágenes, lo que significa que las imágenes cargan más rápido y en el tamaño de pantalla correcto para que tengas una experiencia de visualización óptima, ya sea que esté utilizando dispositivos de escritorio o móviles.

Echa un vistazo a la vista previa en vivo de este impresionante plugin totalmente personalizable y compruébalo por ti mismo.

5. Resizable Multicolor Countdown

¿Quieres generar algo de difusión boca a boca sobre una próxima venta o hacer que todos en tu equipo estén al tanto del tiempo que queda hasta una importante fecha límite?

Resizable Multicolor Countdown muestra los días, horas, minutos y segundos que faltan hasta la fecha de un evento en tu sitio web. Es un temporizador redimensionable que viene con animación de volteo y tiene colores editables que pueden ser configurados para cambiar a lo largo del tiempo.

Utiliza datos vectoriales para dibujar los dígitos y los paneles del contador regresivo. Eso significa que la calidad de la imagen es alta e independiente del tamaño. También puedes ajustar el color del panel posterior o utilizar un color estático.

El usuario simondlh dice:

Excelente plugin. Fácil de personalizar. Tiene un aspecto muy profesional

6. Swift Box: Slider y visualizador jQuery para contenido

Los sliders de contenido son una excelente forma de presentar el mejor contenido en tu sitio web agrupándolo en una serie de presentaciones de diapositivas deslizantes.

Si esto es lo que buscas, Swift Box te tiene completamente cubierto.

¿Qué hace Swift Box?

Swift Box organiza tu contenido en cajetines. Cada cajetín puede extraer contenido procedente de fuentes ilimitadas.

Puedes mezclar contenido de fuentes tan diversas como feeds RSS, páginas de Facebook, Twitter, Youtube, Pinterest, Soundcloud y también gestionar contenidos en línea.

El plugin se encargará de todo por ti. Títulos, enlaces, imágenes, listas, tablas: todo está contemplado y listo para ser utilizado.

Además, puedes agrupar varios contenidos y ordenarlos por fecha.

Más características de este gran plugin incluyen:

Cada elemento Swift Box es personalizable. Existen más de 40 opciones a configurar para cubrir tus necesidades.
El contenido se puede filtrar mediante un potente sistema, lo que te permite quitar y eliminar etiquetas HTML innecesarias.
Totalmente responsivo, adaptable y optimizado para dispositivos móviles para garantizar una pantalla perfecta en cualquier dispositivo.
Soporta interacciones táctiles y de arrastre para ofrecer una experiencia de usuario superior, ¡tanto en equipos de escritorio como en dispositivos móviles!
Los tiempos de los sliders son totalmente personalizables, con la capacidad de crear también un impresionante efecto deslizante continuo, perfecto para las tiras horizontales de noticias de última hora.

Echa un vistazo a la vista previa en vivo y comprueba lo que puede hacer con este plugin.

7. Slick Modal PopUp

Slick Modal PopUp es uno de los mejores generadores de popups del mercado. Hace que tus ventanas emergentes destaquen al mostrar tu contenido emergente de forma muy eficaz y con estilo. Viene con un montón de opciones que te permitirán crear ilimitadas combinaciones y conseguir fácilmente un llamativo efecto para tus mensajes.

No necesitas ningún conocimiento especial sobre código para utilizar este script generador de popups. Viene con 40 demostraciones prefabricadas para ayudarte a empezar rápidamente. ¡Todo lo que tendrás que hacer es copiar y pegar!

¿Por qué usar popups?

Los popups o ventanas emergentes son muy eficaces. Puedes usarlos para realizar encuestas, hacer crecer tu lista de suscriptores vía email, aumentar el seguimiento de tus redes sociales, mostrar anuncios y mucho más.

En última instancia, los popups de un sitio web son una estupenda manera de aumentar la participación de los visitantes de tu sitio web y también una forma de atraer y retener a los clientes.

¿Por qué es Slick Modal PopUp el mejor popup?

Para crear un popup, puedes empezar con cualquier código o diseño, incluidos banners, suscripciones a newsletters informativas, formularios de contacto, ofertas especiales, imágenes, galerías, iframes, vídeo y mapas.

Estas son algunas otras ventajas del uso de Slick Modal PopUp:

Diseño y código limpio
Las opciones que necesitas son fáciles de instalar y configurar
Fácil de personalizar para adaptarse a tu diseño y maquetación de página
Ligero y libre de racimos

Echa un vistazo a la vista previa en vivo y comprueba por qué el usuario scippy opina lo siguiente:

Gran producto, ¡una herramienta útil e indispensable para todo webmaster! Además, ¡su soporte post-venta es excelente!

8. Simple Price Calculator

Simple Price Calculator puede transformar cualquier formulario basado en HTML en un formulario para calcular precios. El formulario es capaz de multiplicar dos campos juntos y se puede añadir un campo de cantidad si fuese necesario.

Los visitantes de tu sitio web pueden obtener presupuestos instantáneos o estimaciones de precio para productos y servicios. Pueden ver los totales junto con los detalles que se muestran dinámicamente dentro de tu página. Es muy fácil de usar: añade simplemente la funcionalidad al identificador de tu formulario, configura algunos atributos y ¡ya tienes en funcionamiento el formulario!

Por último, la divisa y parte del texto del formulario pueden ser modificados a través de las opciones del plugin.

El usuario pagespages dice:

¡Fantástico! Fácil, flexible, gran documentación, estupendos ejemplos. Un producto muy pulido.

9. Media Boxes Portfolio

Media Boxes Portfolio te permite mostrar todo tipo de contenido a través de una potente cuadrícula. Puedes utilizarlo para entradas de blog, medios visuales, clientes, portafolios, carritos de compra, galerías, etc. También viene con un potente sistema de filtrado, ordenación y búsqueda.

Puedes incluir el plugin en tu existente HTML y CSS y se adaptará automáticamente a su contenedor. También puedes personalizarlo rápidamente para que se adapte a tus necesidades.

El plugin también utiliza Fancybox y el Magnific Popup que son unos plugins para lightbox y popup muy populares y potentes. Puedes colocar un montón de cosas en las ventanas emergentes, por ejemplo, imágenes, iframes, texto HTML, mapas de Google y mucho más.

También es compatible con el enlazado profundo. Puedes enlazar directamente al popup para compartir el contenido emergente con tus amigos o en tu red social.

Echa un vistazo a la vista previa en vivo y comprueba por qué el usuario paulhtanaka dice esto sobre este fantástico plugin:

¡Las imágenes se cargan rápido y la presentación en pantalla es perfecta! Las funciones de filtrado y búsqueda son lo que la gente más alaba. ¡Me encanta!

10. Smart Forms

Los formularios son la herramienta más necesaria en cualquier sitio web. Si necesitas un buen plugin para crear tus propios formularios no busques más, lo que necesitas es Smart Forms. Smart Forms es framework responsivo y profesional para formularios con una interfaz de usuario de formulario coherente y limpia.

Viene con los siguientes widgets:

Selectores de fecha, selectores de horario, selectores de mes y selectores de color
Pasos numéricos y controles deslizantes para la interfaz de usuario
Mapas de Google
Validación mediante botones tipo interruptor
Enmascaramiento

También viene con una excelente colección de plantillas listas para su uso, como formularios de contacto, formularios de inicio de sesión, formularios para pedidos, sencillas encuestas, formularios de registro, pagos, comentarios, presupuestos, formularios de feedback y muchos otros más.

También incluye un plugin para formatear números y divisas para añadir separadores de decimales, símbolos de moneda, corchetes y mucho más.

Estas son algunas cosas que puedes hacer con Smart Forms:

Crear formularios emergentes de varios pasos y modales
Clonar formularios y elementos de formulario dinámicamente
Crear elementos de selección encadenados
Utilizar la lógica condicional y la bifurcación en los formularios
Crear widgets de autocompletar y combinación
Formateado de números y monedas
Exportación de datos en PDF

Los formularios funcionan bien en una amplia gama de navegadores de escritorio y móviles.

Echa un vistazo a la vista previa en vivo y comprueba por qué el usuario digidave0205 comenta lo siguiente:

Código de increíble calidad y repleto de características. Muy recomendable.

Extras

Chameleon HTML5 Audio Player con o sin lista de reproducción

Si buscas un reproductor de audio con completas funciones que también te proporcione la opción de añadir música de fondo a un sitio web, Chameleon HTML5 Audio Player With or Without playlist es tu mejor opción. Es compatible con archivos de audio .mp3 y .ogg.

La versión mínima te permite añadir música de fondo a tu sitio web.

Aquí tienes más cosas que puedes hacer con este reproductor:

Puedes personalizarlo cambiando el color del fondo del reproductor, el control deslizante de volumen, el temporizador, el búfer, la barra de búsqueda, el título de la canción, el fondo de la lista de reproducción, la tipografía de la lista de reproducción y el separador de línea de los elementos de la lista de reproducción. Esto hace que resulte más fácil integrarlo en cualquier diseño.
Puedes generar automáticamente la lista de reproducción del reproductor a partir de una carpeta que contenga los archivos MP3.
Puedes insertar varios reproductores de audio en tu sitio web e incluso en una misma página

Usuario por alexlom2012 nos comenta lo siguiente:

¡Estoy completamente satisfecho con el reproductor y sus características! ¡El producto es exactamente lo que esperaba! ¡Gracias!

Reproductor de vídeo HTML5 con fondo de vídeo a pantalla completa

HTML5 Video Player With FullScreen Video Background es un plugin que puede utilizarse en tu sitio web como fondo de vídeo a pantalla completa cubriendo toda la pantalla y sin líneas negras. También tiene imágenes alternativas opcionales para sustituir el vídeo en dispositivos móviles.

Además dispone de opciones para establecer el fondo de vídeo en tu sitio únicamente para un div en particular.

Entre algunas características de este plugin se incluyen:

totalmente responsivo, incluyendo imágenes y videos, y se adaptará a la resolución del navegador o del dispositivo
compatible con los sistemas operativos IOS y Android
reproductor de vídeo de ancho fijo o ancho completo
permite colocar la navegación inferior a la izquierda, a la derecha o en el centro.
ligero: el archivo JS sólo pesa alrededor de 22KB

Echa un vistazo a la vista previa en vivo y comprueba por qué el usuario jleesley dice:

¡Gran plugin! Funciona a la perfección.

Conclusión:

Los plugins que cubrí en este resumen ciertamente me llamaron la atención. Existen muchos excelentes plugins Javascript para multimedia que no incluí en este artículo. Puedes encontrar estos y muchos más para llevar tu sitio web al siguiente nivel en CodeCanyon.

Si te ha gustado este artículo echa un vistazo a algunos de nuestros otros artículos y tutoriales relacionados.