VELAPLAYER / PROTOTYPE 03

A complete playback surface

Video, without
the chrome.

Adaptive video, multilingual audio, live DVR and accessibility controls underneath. A deliberately quiet surface above it.

HLSDASHLIVEAUDIOHDRSDK
AUDIO / CHAPTERS / LIVE DVR / HDR SIGNALS
DASH / ABR
0:00/0:00
Opening
MULTILINGUAL AUDIOCHAPTER + DVR TIMELINEHDR / DOLBY METADATA

Theme + caption builder

Design the entire surface.

{
  "src": "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd",
  "sourceType": "dash",
  "thumbnailVtt": "/demo-thumbnails.vtt",
  "textTracks": [
    {
      "src": "/demo-en.vtt",
      "language": "en",
      "label": "Vela English",
      "kind": "subtitles"
    },
    {
      "src": "/demo-ja.vtt",
      "language": "ja",
      "label": "Vela 日本語",
      "kind": "subtitles"
    }
  ],
  "chapters": [
    {
      "id": "opening",
      "title": "Opening",
      "start": 0,
      "end": 12
    },
    {
      "id": "crossing",
      "title": "The crossing",
      "start": 12,
      "end": 24
    },
    {
      "id": "horizon",
      "title": "Horizon",
      "start": 24
    }
  ],
  "captionStyle": {
    "fontScale": 1,
    "color": "#ffffff",
    "background": "#080908",
    "backgroundOpacity": 0.82,
    "edge": "shadow",
    "fontFamily": "sans"
  },
  "theme": {
    "accent": "#d8ff62",
    "surface": "#080908",
    "foreground": "#ffffff",
    "muted": "#a5a79f",
    "radius": 0,
    "blur": 18,
    "controlsOpacity": 0.76
  }
}
01

Playback model

01

Tracks, not toggles.

Resolution, audio language, subtitles and chapters are exposed as real media tracks. Vela keeps one state model across HLS and DASH.

02

Live has its own clock.

Live playback uses the seekable DVR window rather than pretending an infinite stream is a VOD. Falling behind reveals a precise Go Live affordance.

03

Metadata stays visible.

HDR10, HLG, Dolby Vision, Dolby Audio and spatial-audio signals surface as restrained badges when the manifest and selected tracks expose them.

02

Input system

Keyboard and touch agree.

J/K/L, arrows, captions, mute and fullscreen map cleanly to desktop. Touch adds double-tap seeking and horizontal scrub gestures without changing the underlying control API.

Space / K   Play · Pause
← / →       Seek ±5s
J / L       Seek ±10s
↑ / ↓       Volume ±5%
C / M / F   Captions · Mute · Fullscreen
Home / End  Start · Live edge
Double tap  Seek ±10s
Swipe       Seek up to ±30s
03

Distribution

React optional.

The same player ships as a React component, a framework-neutral iframe controller, and a custom element. The Web Component keeps Vela usable from plain HTML, Vue, Svelte or any other DOM environment.

import "@vela/player/web-component";

<vela-player
  src="https://cdn.example.com/master.m3u8"
  type="hls"
  accent="#d8ff62">
</vela-player>

// or
import { VelaPlayer } from "@vela/player/react";
MULTI-AUDIOHDR / DOLBY SIGNALSLIVE DVRCHAPTERSCAPTION STYLESKEYBOARD / GESTURESNPM PACKAGEWEB COMPONENT