github [#142] Created with Sketch. v1.6.1 BETA
Reproductor de video

Dynamo
Player.

Moderno, ligero y sin dependencias. Construido sobre el elemento <video> nativo con soporte para HLS, múltiples calidades, subtítulos y modo ambiente.

HLS / .m3u8 Múltiples calidades Subtítulos Ambient Mode Picture-in-Picture Zero dependencies
Dynamo Player
HLS
1:24 / 3:18
scroll
Demo en vivo
Cómo usarlo
Todo lo que necesitas para integrar Dynamo Player en tu proyecto.
1

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>
2

Agrega el elemento <video>

El reproductor se activa automáticamente sobre cualquier <video id="dynamoPlayer"> en el DOM.

HTML 
<video
  id="dynamoPlayer"          // Requerido
  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>
3

Inicialización dinámica (opcional)

Si insertas el elemento de video dinámicamente (ej. con JS o un framework), llama a init() manualmente.

JavaScript 
// Inicializa todos los <video id="dynamoPlayer"> nuevos
DynamoPlayer.init();

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.