<ovm-player> Component Guide

The <ovm-player> is a high-performance Web Component designed to play interactive video streams encoded in the .ovm container. It synchronizes HTML/SVG interactive hotspots with hardware-accelerated HTML5 video playback.

---

1. Quick Setup & HTML Usage

Coming soon

The video player is not published on the CDN yet, so there is no script to load today. This page describes the planned API; the loading snippet will appear here once <ovm-player> can be embedded.

The player embeds an internal <video playsinline> element alongside an overlay viewport.

---

2. DOM Attributes & Configuration

The element supports the following attributes:

Attribute	Type	Default	Description
src	string	""	Source URL of the .ovm interactive video file
lang	string	"es"	Active language for subtitles and localized hotspots

---

3. Real-Time Tracking & Keyframe Interpolation

<ovm-player> connects directly to the video element's timeupdate and requestAnimationFrame cycles:

• 60 FPS Coordinate Calculation: Given two keyframes $K_0$ at $t_0$ and $K_1$ at $t_1$, the position for current time $t$ is calculated via: $$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)$$
• Zero Drift: By computing coordinates strictly from the native hardware video clock, overlays never desynchronize, even during frame drops or fast-forward scrubbing.

const ovmPlayer = document.querySelector('ovm-player');

// Listen for branch choices or interaction events
ovmPlayer.addEventListener('ovm:action', (e) => {
  console.log('Action triggered:', e.detail.action, e.detail.target);
});

---

4. Range Requests & Memory Efficiency

Instead of loading the entire video into client memory:

• Chunk Tail Demuxing: Uses HTTP Range: bytes=-65536 to read the metadata tail instantly without buffering the whole file.
• Native Browser Streaming: Video chunks stream directly through native browser cache pipelines with zero JavaScript memory overhead.

---

5. Event Lifecycle & Public Methods

<ovm-player> exposes convenient methods for external video orchestration:

// Playback controls
ovmPlayer.play();
ovmPlayer.pause();
ovmPlayer.seek(42.5); // Jump to 42.5 seconds

// Language switching
ovmPlayer.setLang('es');

// Access the underlying HTMLVideoElement
const videoEl = ovmPlayer.getVideoElement();