Guía del Componente <ovm-player>
El <ovm-player> es un Web Component de alto rendimiento diseñado para reproducir flujos de vídeo interactivo empaquetados en el contenedor .ovm. Sincroniza zonas activas interactivas HTML/SVG con la reproducción de vídeo HTML5 acelerada por hardware.
1. Configuración Rápida y Uso en HTML
Próximamente
El reproductor de vídeo todavía no está publicado en el CDN, así que hoy no hay ningún script que cargar. Esta página describe la API prevista; el código para incrustarlo aparecerá aquí cuando <ovm-player> se pueda usar.
El reproductor incrusta un elemento <video playsinline> junto a un viewport superpuesto.
2. Atributos del DOM y Configuración
El elemento admite los siguientes atributos configurables:
| Atributo | Tipo | Por Defecto | Descripción |
|---|---|---|---|
src | string | "" | URL del archivo de vídeo interactivo .ovm |
lang | string | "es" | Idioma activo para subtítulos y capas interactivas |
3. Seguimiento en Tiempo Real e Interpolación de Keyframes
<ovm-player> se conecta directamente a los ciclos de timeupdate y requestAnimationFrame del elemento de vídeo:
- Cálculo de Coordenadas a 60 FPS: Dados dos keyframes $K_0$ en $t_0$ y $K_1$ en $t_1$, la posición para el tiempo actual $t$ se calcula con: $$p = \frac{t - t_0}{t_1 - t_0}, \quad (x, y) = (1 - p) \cdot (x_0, y_0) + p \cdot (x_1, y_1)$$
- Cero Desfase Temporal: Al calcular las coordenadas directamente desde el reloj de hardware del vídeo, las capas jamás se desfasan, incluso con caídas de fotogramas o avance rápido.
const ovmPlayer = document.querySelector('ovm-player');
// Escuchar elecciones de ramas narrativas o clics interactivos
ovmPlayer.addEventListener('ovm:action', (e) => {
console.log('Acción disparada:', e.detail.action, e.detail.target);
});4. Eficiencia de Memoria y Peticiones de Rango HTTP
En lugar de cargar el vídeo completo en la memoria del cliente:
- Demultiplexado en Cola de Archivo: Utiliza peticiones
Range: bytes=-65536para leer la metadata final sin almacenar en búfer el archivo completo. - Transmisión Nativa del Navegador: Los fragmentos de vídeo se transmiten mediante la caché nativa del navegador con cero sobrecarga de memoria en JavaScript.
5. Ciclo de Vida de Eventos y Métodos Públicos
<ovm-player> expone métodos directos para la orquestación externa del reproductor:
// Controles de reproducción
ovmPlayer.play();
ovmPlayer.pause();
ovmPlayer.seek(42.5); // Saltar al segundo 42.5
// Cambio de idioma
ovmPlayer.setLang('en');
// Acceder al elemento HTMLVideoElement subyacente
const videoEl = ovmPlayer.getVideoElement();