⚡ Dynamo Player v1.7 — ¡Gran Actualización! Reducción del 51% de peso (~8 KB Gzip), Multi-Player y
Cero Conflictos CSS
¡Hola Betas! 👋
Les comparto la nueva versión
v1.7 de
Dynamo Player, mi reproductor de video web ultraligero y
moderno construido en
Vanilla JS (cero dependencias obligatorias de runtime, soporte HLS bajo demanda,
múltiples calidades, subtítulos, modo ambiente y miniaturas automáticas).
En esta versión me enfoqué al 100% en
rendimiento extremo, blindaje de memoria y una reducción masiva de
peso.
📊 ¿Qué hay de nuevo en la v1.7? (Comparado con la v1.6.1)
🚀 1. Reducción del 51% en el Peso del Reproductor (~8.2 KB Gzip)
Optimicé y re-vectoricé manualmente todo el catálogo de iconos SVG del reproductor y configuré compresión
avanzada multi-paso con Terser:
•
icons.js: Pasó de
36.2 KB a solo 4.3 KB (📉
-88%).
•
Bundle Minificado (.min.js): Pasó de
63.03 KB a 30.91 KB (📉
-
51%).
•
Transferencia de Red (Gzip): ¡De
18.36 KB a solo 8.25 KB! ⚡
🎯 2. Ocultamiento Inteligente Sincronizado (Menú & Controles)
•
Antes: Si el usuario estaba cambiando de calidad o subtítulos, los controles se ocultaban por
inactividad dejando el menú flotando solo sobre el video.
•
Ahora: Mientras el menú de configuración esté abierto,
los controles permanecen visibles. Al
cerrarlo, el temporizador de inactividad se reanuda suavemente y, si los controles se ocultan por pausa o
finalización, el menú se cierra automáticamente.
🛡️ 3. Aislamiento Total de CSS (Cero Conflictos con tu Web)
•
Antes: Existían clases globales genéricas como .hidden que podían interferir con el Navbar, modales o
utilidades de frameworks como
Tailwind CSS o
Bootstrap.
•
Ahora: Encapsulé todos los estilos al
100% bajo prefijos .dynamo-*. Puedes incrustarlo en
cualquier sitio web sin temor a que rompa el diseño del header o menús responsive.
👥 4. Soporte Multi-Reproductor Real en la Misma Página
• Acoté todas las consultas en el DOM estrictamente a cada contenedor (wrapper.querySelector).
• Cada reproductor tiene su propio ciclo de vida, estado y temporizadores aislados.
• Puedes colocar decenas de videos en una sola página sin cruce de eventos ni colisiones de variables.
🧠 5. Cero Fugas de Memoria (Memory Leaks) y Ahorro de CPU
•
Dynamic Dragging Binding: Los listeners globales de mousemove y mouseup para la barra de progreso ya no
se ejecutan todo el tiempo en segundo plano;
solo se suscriben al hacer clic sostenido y se destruyen de
inmediato al soltarlo.
•
Limpieza de Timers: Centralicé la destrucción con clearHideTimer() para evitar timers huérfanos en
memoria al pausar o terminar el video.
💻 ¿Cómo implementarlo en tu web?
Solo necesitas incluir un único archivo JS (o descargarlo a tu hosting):
HTML:
<!-- Cargar Dynamo Player -->
<script src="https://alexmejf.github.io/dynamo_player/dist/dynamo-player.min.js"></script>
<!-- Tu elemento de video -->
<video
class="dynamo-player"
data-src="https://tu-servidor.com/video.mp4"
poster="https://tu-servidor.com/poster.jpg"
ambientMode="true"
controlsOverscreen="true"
autoThumbnails="true"
inPicture="true">
</video>
(Si usas HLS con streams .m3u8, Dynamo Player descarga hls.js automáticamente bajo demanda únicamente si el
navegador lo necesita).
🔗 Enlaces y Demo
• 🌐
Demo en vivo y Documentación: https://alexmejf.
github.io/dynamo_player/
• 🐙
Repositorio GitHub: https://github.
com/AlexMejf/dynamo_player
• 📄
Licencia: MIT (Open Source y 100% gratuito)
Cualquier feedback, duda o sugerencia de nuevas funciones para el roadmap (componentes para React/Vue, MPEG-DASH,
playlists, etc.) la leo con gusto en los comentarios. ¡Espero que les sea de gran utilidad para sus proyectos y
sitios webs! 🚀
Click aqui
