⚡ Dynamo Player v1.7 — Grande Atualização! Redução de 51% do peso (~8 KB Gzip), Multi-Player e
Zero Conflitos CSS
Olá Betas! 👋
Compartilho com vocês a nova versão
v1.7 do
Dynamo Player, meu player de vídeo web ultraleve e
moderno construído em
Vanilla JS (zero dependências obrigatórias de runtime, suporte HLS sob demanda,
múltiplas qualidades, legendas, modo ambiente e miniaturas automáticas).
Nesta versão, foquei 100% em
desempenho extremo, blindagem de memória e uma redução massiva de
peso.
📊 O que há de novo na v1.7? (Comparado com a v1.6.1)
🚀 1. Redução de 51% no Peso do Player (~8.2 KB Gzip)
Otimizei e re-vetorizei manualmente todo o catálogo de ícones SVG do player e configurei compressão
avançada multi-passo com Terser:
•
icons.js: Passou de
36.2 KB para apenas 4.3 KB (📉
-88%).
•
Bundle Minificado (.min.js): Passou de
63.03 KB para 30.91 KB (📉
-
51%).
•
Transferência de Rede (Gzip): De
18.36 KB para apenas 8.25 KB! ⚡
🎯 2. Ocultamento Inteligente Sincronizado (Menu & Controles)
•
Antes: Se o usuário estivesse alterando a qualidade ou legendas, os controles eram ocultados por
inatividade, deixando o menu flutuando sozinho sobre o vídeo.
•
Agora: Enquanto o menu de configuração estiver aberto,
os controles permanecem visíveis. Ao
fechá-lo, o temporizador de inatividade é retomado suavemente e, se os controles forem ocultados por pausa ou
finalização, o menu é fechado automaticamente.
🛡️ 3. Isolamento Total de CSS (Zero Conflitos com seu site)
•
Antes: Existiam classes globais genéricas como .hidden que podiam interferir com o Navbar, modais ou
utilitários de frameworks como
Tailwind CSS ou
Bootstrap.
•
Agora: Encapsulei todos os estilos em
100% sob prefixos .dynamo-*. Você pode incorporá-lo em
qualquer site sem medo de quebrar o design do header ou menus responsivos.
👥 4. Suporte Multi-Player Real na Mesma Página
• Limitei todas as consultas no DOM estritamente a cada container (wrapper.querySelector).
• Cada player tem seu próprio ciclo de vida, estado e temporizadores isolados.
• Você pode colocar dezenas de vídeos em uma única página sem cruzamento de eventos ou colisões de variáveis.
🧠 5. Zero Vazamentos de Memória (Memory Leaks) e Economia de CPU
•
Dynamic Dragging Binding: Os listeners globais de mousemove e mouseup para a barra de progresso não
são mais executados o tempo todo em segundo plano;
apenas se inscrevem ao clicar e segurar e são destruídos
imediatamente ao soltar.
•
Limpeza de Timers: Centralizei a destruição com clearHideTimer() para evitar timers órfãos na
memória ao pausar ou terminar o vídeo.
💻 Como implementar no seu site?
Você só precisa incluir um único arquivo JS (ou baixá-lo para sua hospedagem):
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>
(Se você usa HLS com streams .m3u8, o Dynamo Player baixa o hls.js automaticamente sob demanda apenas se o
navegador precisar).
🔗 Links e Demo
• 🌐
Demo ao vivo e Documentação: https://alexmejf.
github.io/dynamo_player/
• 🐙
Repositório GitHub: https://github.
com/AlexMejf/dynamo_player
• 📄
Licença: MIT (Open Source e 100% gratuito)
Qualquer feedback, dúvida ou sugestão de novas funções para o roadmap (componentes para React/Vue, MPEG-DASH,
playlists, etc.) lerei com prazer nos comentários. Espero que seja de grande utilidade para seus projetos e
sites! 🚀
Clique aqui
