Standard

VideoML Language Standard

Declarative XML for time-based scenes, cues, and media. Draft v0.1.

View page source GitHub repo NPM: @videoml/player View parser (xml.ts)View web component

Canonical Root

Every VideoML document starts with <vml>. The root describes video metadata and declares the timeline.

<vml id="intro" title="Intro" fps="30" width="1920" height="1080">
  <scene id="scene-1">
    <cue id="line-1"><voice>Hello world.</voice></cue>
  </scene>
</vml>

VideoML treats time as a layout axis. Add a scene and the video grows in time, just like adding a div grows a page in space.

Temporal Layout

sequence plays children back-to-back.
stack plays children in parallel.
duration accepts frames (f), seconds (s), or ms.

<sequence>
  <scene duration="3s">...</scene>
  <scene duration="2s">...</scene>
</sequence>

<stack>
  <layer duration="10s">...</layer>
  <audio src="music.wav" duration="8s" />
</stack>

Scenes, Cues, and Voice

Scenes are the top-level timeline segments. Cues are the atomic timing units inside a scene. Voice cues synthesize narration when rendering.

<scene id="overview">
  <cue id="intro">
    <voice>Hello. This is a cue.</voice>
  </cue>
  <cue id="detail" start="intro.end + 0.5s">
    <voice>Timed relative to the previous cue.</voice>
  </cue>
</scene>

Timeline API

Players expose a timeline object with frame/time state and events for scene/cue transitions.

window.timeline.frame
window.timeline.time

window.addEventListener('scene:start', (e) => {
  console.log(e.detail.sceneId)
})

Inline Scripts

Inline scripts may listen to timeline events or mutate the VOM. The player re-binds handlers when DOM changes are detected.

<vml>
  <script>
    window.addEventListener('cue:start', (e) => {
      console.log('Cue started', e.detail.cueId)
    })
  </script>
</vml>