Dynamo Player

Versión 1.7

Novedades y Mejoras

Conoce las nuevas optimizaciones de sincronización, aislamiento y arquitectura.

🎯

Ocultamiento Sincronizado

UX & Controles

Los controles se mantienen visibles mientras el menú de ajustes esté abierto. La inactividad se reanuda al cerrarlo y el menú se cierra automáticamente si los controles se ocultan por inactividad o pausa.

🛡️

Aislamiento CSS 100%

Cero Conflictos

Estilos 100% encapsulados bajo prefijos .dynamo-*. Se eliminaron clases genéricas globales (como .hidden) para garantizar 0 colisiones con Navbars, Tailwind CSS, Bootstrap o layouts externos.

👥

Soporte Multi-Reproductor

Arquitectura Scoped

Múltiples reproductores pueden convivir en una misma página de manera totalmente independiente, con closures y consultas DOM aisladas, soportando clases .dynamo-player o data-dynamo.

⚡

51% Más Ligero (~8 KB Gzip)

Rendimiento Extremo

El bundle se redujo de 63 KB a solo 30.9 KB (reducción del 51% y 55% en transferencia de red gzip) mediante la vectorización pura de SVG y compresión avanzada.

Cómo usarlo

Todo lo que necesitas para integrar Dynamo Player en tu proyecto.

Importación desde CDN

Carga un único archivo JS desde la CDN o descarga el archivo dynamo-player.min.js

HTML

<script src="https://alexmejf.github.io/dynamo_player/dist/dynamo-player.min.js"></script>

Agrega el elemento <video>

El reproductor se activa automáticamente sobre cualquier <video class="dynamo-player">, <video data-dynamo> o <video id="dynamoPlayer"> en el DOM.

HTML

<video
  class="dynamo-player"     // o id="dynamoPlayer" / data-dynamo
  data-src="mi-video.mp4"     // HLS, M3U8, MP4, WebM...
  poster="poster.jpg"          // url del poster
  controlsOverscreen="true"  // controles sobre el video
  ambientMode="true"          // modo ambiental
  autoThumbnails="true"       // miniaturas en seek
  inPicture="true"            // picture-in-picture
></video>

Inicialización dinámica (opcional)

Si insertas el elemento de video dinámicamente o usas selectores personalizados, llama a init() manualmente.

JavaScript

// Inicializa automáticamente todos los reproductores
DynamoPlayer.init();

// O con selector personalizado / elemento específico
DynamoPlayer.init('.mi-clase-de-video');

Todos los atributos se declaran directamente en el elemento <video>.

data-src

string | JSON — Requerido

URL del video o JSON con fuentes múltiples. Soporta .mp4, .webm y .m3u8.

poster

string (URL)

Imagen del poster. Si se omite, el player captura un frame automáticamente del video.

controlsOverscreen

"true" | "false"

Muestra botones de Play/Pausa, Atrás y Adelante flotando sobre el video al estilo streaming.

autoThumbnails

"true" | "false"

Activa la previsualización de frames al pasar el cursor por la barra de progreso.

ambientMode

"true" | "false"

Proyecta un halo de luz difusa detrás del player que refleja los colores dominantes del video.

inPicture

"true" | "false"

Muestra el botón de Picture-in-Picture. Solo aparece si el navegador soporta la API nativa.

El atributo data-src acepta tres formatos distintos.

URL simple

<video
  id="dynamoPlayer"
  data-src="video.mp4">
</video>

HLS (.m3u8)

<video
  id="dynamoPlayer"
  data-src="stream.m3u8">
</video>
// hls.js se carga automáticamente

Múltiples calidades

data-src='[
  { "label": "1080p", "src": "video-1080.mp4" },
  { "label": "720p",  "src": "video-720.mp4" },
  { "label": "480p",  "src": "video-480.mp4" }
]'

Con subtítulos

data-src='{
  "sources": [
    { "label": "1080p", "src": "video.mp4" }
  ],
  "subtitles": [
    { "label": "Español", "srclang": "es", "src": "subs-es.vtt", "default": true }
  ]
}'

El reproductor captura eventos de teclado cuando tiene el foco. Haz clic sobre él para enfocarlo.

SpacePlay / Pausa

→Adelantar 5 segundos

←Retroceder 5 segundos

Compatibilidad

Funciona en todos los navegadores modernos.

Chrome / Edge

✅ Soporte completo incluyendo Ambient Mode y Auto Thumbnails.

Firefox

✅ Soporte completo. HLS vía hls.js.

Safari

✅ HLS nativo. Ambient Mode requiere cabeceras CORS en el servidor.