<ovm-player>

Web Component for OVM video playback with instant metadata extraction.

Attributes

Attribute	Type	Default	Description
src	string	""	URL of the .ovm file
lang	string	"es"	Language code for text overlays (es, en, zh, etc.)
autoplay	boolean	false	If present, video plays automatically on load

Usage

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

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

How It Works

Instant Metadata Extraction

The component downloads only the last 64KB of the .ovm file:

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

The OVM metadata JSON is stored as a Matroska attachment at the end of the file. The component scans the tail bytes for the JSON object and extracts it.

Native Video Playback

The original src URL is assigned directly to a native <video> element:

video.src = src;  // browser handles buffering

The browser streams and buffers the baked video (Layer −1) natively. No JavaScript buffering, no Blob URLs, no memory overhead.

Tracking-Aware Rendering

Each slot can have tracking_data — an array of keyframes for animated bounding boxes:

{
  "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]
  ]
}

The component linearly interpolates between keyframes based on video.currentTime.

Shadow DOM

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

JavaScript API

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"

Security

• All slot text rendered via textContent, never innerHTML
• Metadata validated against Zod-equivalent schema before rendering
• Invalid/tampered files rejected with descriptive error
• Shadow DOM isolates component styles and DOM