Vega-Video is a Vega plugin for video data. It lets you create portable, expressive, and performant visualizations combining conventional and video data.
Vega-Video lets you sync with a video player through signals (e.g., @player:time), annotate videos with CV detections (e.g., draw bounding boxes), and compose and transform videos (e.g., filter or sort a compilation).
- Try the Vega-Video Editor to experiment with video specs interactively
- See the Vega Editor for the base Vega grammar
Include Vega-Video alongside Vega, Vega-Lite, and Vega-Embed. Optionally include hls.js for video transformation/playlists.
<script src="https://cdn.jsdelivr.net/npm/vega@6"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@6"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<!-- Optional: needed for video transformation/playlists -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<script src="vega-video.js"></script>const spec = { /* Vega spec with @player:signal references */ };
const videos = [{ name: "main", ref: '#myVideo' }];
const rewritten = vegaVideo.rewrite(spec, { videos });
const result = await vegaEmbed('#vis', rewritten, { actions: false });
vegaVideo.attach(result.view, { videos, spec: rewritten });Requires Bun.
bun install
bun run build # outputs dist/vega-video.js and dist/vega-video.esm.js
bun testDeveloped by the OSU Interactive Data Systems Lab.
License: Apache-2.0