<ovm-player>

Web Component para la reproducción de video OVM con extracción instantánea de metadatos.

Atributos

Atributo	Tipo	Predeterminado	Descripción
src	string	""	URL del archivo .ovm
lang	string	"es"	Código de idioma para superposiciones de texto (es, en, zh, etc.)
autoplay	boolean	false	Si está presente, el video se reproduce automáticamente al cargar

Uso

<script src="ovm-player.js"></script>

<ovm-player
  src="https://cdn.example.com/my-video.ovm"
  lang="en"
  autoplay
></ovm-player>

Cómo funciona

Extracción instantánea de metadatos

El componente descarga solo los últimos 64KB del archivo .ovm:

fetch(src, {
  headers: { Range: "bytes=-65536" }
})

El JSON de metadatos OVM se almacena como un adjunto Matroska al final del archivo. El componente escanea los bytes finales en busca del objeto JSON y lo extrae.

Reproducción nativa de video

La URL src original se asigna directamente a un elemento nativo <video>:

video.src = src;  // browser handles buffering

El navegador transmite y almacena en búfer el vídeo horneado (Capa −1) de forma nativa. Sin búfer en JavaScript, sin URLs Blob, sin sobrecarga de memoria.

Renderizado con seguimiento

Cada slot puede tener tracking_data: un array de keyframes para cuadros delimitadores animados:

{
  "id": "main_text",
  "content": { "es": "Hola", "en": "Hello" },
  "tracking_data": [
    [0.0, 0.1, 0.5, 0.2, 0.5, 0.6, 0.7, 0.1, 0.8, 0.4, 0.6],
    [0.5, 0.15, 0.52, 0.22, 0.48, 0.62, 0.72, 0.12, 0.82, 0.38, 0.62]
  ]
}

El componente interpola linealmente entre keyframes basándose en video.currentTime.

Shadow DOM

<ovm-player>
  #shadow-root
    <style>/* scoped styles */</style>
    <div.loader>Extrayendo metadatos…</div>
    <video src="video.ovm"></video>
    <div.overlay>
      <div.slot>Hello</div>
      <div.slot>World</div>
    </div.overlay>
</ovm-player>

API de JavaScript

const player = document.querySelector("ovm-player");

// Change language
player.lang = "en";

// Change source
player.src = "new-video.ovm";

// Read current state
console.log(player.lang);  // "en"
console.log(player.src);   // "new-video.ovm"

Seguridad

• Todo el texto de los slots se renderiza mediante textContent, nunca innerHTML
• Los metadatos se validan contra un esquema equivalente a Zod antes de renderizar
• Los archivos inválidos o manipulados se rechazan con un error descriptivo
• El Shadow DOM aísla los estilos y el DOM del componente