Dynamo Player

Versión 1.9

Novedades y Mejoras

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

Aspect Ratio Ajustable

Pantalla & Zoom Móvil

Adapta el video a tu pantalla con facilidad. Alterna entre el formato original y el modo rellenar pantalla sin deformaciones, eliminando las barras negras en teléfonos móviles y monitores anchos.

Personalizable Icons Config

Iconos & CDN

Configura y personaliza los iconos del reproductor directamente desde JavaScript o CDN. Cambia play, pausa, volumen y ajustes con tus propios SVGs al instante sin recompilar.

Menú de Click Izquierdo & Derecho

Ajustes & Contexto

Acceso completo a todos los controles: menú de ajustes con click izquierdo (calidades, audio, subtítulos y velocidad) y menú contextual con click derecho o toque sostenido (capturas HD, bucle, PiP y estadísticas).

Controles Inteligentes

UX & Controles

Los controles se ocultan suavemente durante la reproducción para no tapar el contenido, pero permanecen visibles mientras tengas abierto cualquier menú de configuración.

Cero Conflictos de Diseño

Aislamiento Total

Estilos totalmente encapsulados bajo prefijos .dynamo-*, eliminando colisiones con Tailwind CSS o Bootstrap y garantizando que tu sitio mantenga su apariencia intacta.

Múltiples Reproductores

Multi-Instancia

Inserta tantos reproductores como necesites en una misma página; cada uno opera de forma totalmente independiente sin interferir en los demás.

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 }
  ]
}'

Personaliza o sobrescribe cualquier icono SVG directamente mediante la API en tiempo de ejecución o desde el CDN, sin recompilar el proyecto y con actualización reactiva en caliente.

Múltiples iconos (Recomendado)

Actualiza uno o varios iconos simultáneamente con setIcons(). Los reproductores activos en la página se actualizarán al instante:

JavaScript

DynamoPlayer.setIcons({
  play:       '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">...</svg>',
  settings:   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">...</svg>',
  forward:    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">...</svg>',
  volumeHigh: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">...</svg>'
});

Icono individual o Proxy reactivo

Modifica iconos individuales mediante setIcon() o asignando directamente en controls / DynamoPlayer.icons:

JavaScript

// Cambio individual con setIcon():
DynamoPlayer.setIcon('play', '<svg>...</svg>');

// Asignación directa en caliente con el alias 'controls':
controls['settings'] = '<svg>...</svg>';

// O por instancia de reproductor específica:
const video = document.querySelector('#dynamoPlayer');
video.dynamoPlayer.setIcons({ pip: '<svg>...</svg>' });

Restauración y consulta

Restaura todos los iconos originales o consulta el código predeterminado:

JavaScript

// Restaurar todos los iconos por defecto:
DynamoPlayer.resetIcons();

// Consultar los iconos originales:
const defaultIcons = DynamoPlayer.getDefaultIcons();

Catálogo de Nombres y Aliases

Nombres soportados por setIcons() y DynamoPlayer.icons:

play / pause

Barra & Overscreen

Botones de reproducción y pausa principales.

forward10 / back10

Aliases: forward, fwd, backward, back

Botones de salto ±10 segundos en la barra y centro de pantalla.

volumeHigh / volumeLow

Aliases: volume, volHigh, volLow

Estados de volumen alto y moderado en el control deslizante.

volumeMute

Aliases: mute, volMute

Icono de audio silenciado (mute).

settings

Alias: config

Botón de rueda de engranaje para abrir el menú de ajustes.

pip

Aliases: pictureInPicture, inPicture

Botón de Picture-in-Picture en controles y menú contextual.

fullscreen / exitFullscreen

Alias: maximize

Entrar y salir de pantalla completa.

loop / camera / aspectRatio

Menú Contextual (Click derecho)

Iconos de bucle, captura de fotograma y relación de aspecto.

sparkles / chart / info

Menú Contextual (Click derecho)

Iconos de modo ambiente, estadísticas técnicas ("Stats for Nerds") y créditos.

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.