The video player for the modern web.
A native Web Component. One tag gives you thumbnails, quality switching, captions and full theming.
Now playing · this is Vega PlayerAI-generated clips: Mochi 1 by Genmo (Apache-2.0)
Works with every framework. It's just HTML.
- React
- Preact
- Vue
- Angular
- Svelte
- Next.js
- Nuxt
- Astro
- SolidJS
- SvelteKit
- Qwik
- Lit
- Remix
- Ember.js
See it in action.
Every example below is live: pick a tab and press play.
Example clips: LTX-Video by Lightricks (Apache-2.0)
One tag
A source and a poster. Everything else has sensible defaults.
<vega-player
src="/video.mp4"
poster="/poster.jpg">
</vega-player>Thumbnails on the progress bar
Hover the bar. Thumbnails come from a WebVTT sprite, or are generated by the player when there is no file.
<vega-player
src="/video.mp4"
thumbnails="/thumbs/thumbnails.vtt"
preload="metadata">
</vega-player>Quality and speed menus
Switch files while it plays: position, play state and speed are kept.
<vega-player
src="/video-720.mp4"
show-playback-rate
qualities='[
{"label": "720p", "src": "/video-720.mp4"},
{"label": "360p", "src": "/video-360.mp4"}
]'>
</vega-player>A sign-up overlay
Opens on pause, or at a given second. Press play: this one appears at 0:03.
<vega-player
src="/trailer.mp4"
modal-title="Members only"
modal-description="Join to watch the full video."
modal-cta-text="Join now"
modal-cta-url="/join"
modal-delay="3">
</vega-player>A different player, from the markup
Accent color, control bar, play button size and its icon, shape and buttons. All attributes, no CSS.
<vega-player
src="/video.mp4"
aspect-ratio="4:3"
color-primary="#ffd400"
color-controls="rgba(26, 22, 0, 0.88)"
play-btn-color="#ffd400"
play-btn-size="md"
play-btn-icon="/icons/pixel-play.svg"
show-stop-button
show-playback-rate>
</vega-player>WebVTT captions
The CC button appears automatically. Captions can start on.
<vega-player
src="/video.mp4"
captions-src="/captions/en.vtt"
captions-label="English"
captions-default>
</vega-player>Methods and events
Control it from your code and react to what happens. Try the buttons.
const player = document.querySelector('vega-player');
player.play();
player.setTime(2.5);
player.setVolume(0.5);
player.addEventListener('vega-player:timeupdate', (e) => {
console.log(e.detail.currentTime);
});// events will appear hereEverything a player needs.
Nothing it doesn't. Every feature is one attribute away.
Web Component
A native Custom Element with Shadow DOM. No framework, no build step, no dependencies.
Seek preview
Time and thumbnails while hovering the bar, from WebVTT sprites or generated on the fly.
Quality & responsive
A quality menu that keeps your place, plus srcset-style picks by player width.
Call-to-action modal
A sign-up or paywall overlay on pause or at a given second.
Themeable
Colors, play button and controls straight from the HTML attributes. CSS optional.
Captions, PiP, Cast
WebVTT captions, Picture-in-Picture and Chromecast with one attribute each.
Accessible
Keyboard shortcuts, ARIA sliders, a focus-trapped modal and reduced motion.
Translatable
Every label and message can be changed with VegaPlayer.i18n.
Small file. Fast start.
Numbers from our own build and test run.
Component37 passed
Registration, attributes, properties, theming, security, translations.
Playback46 passed
Loading, errors, play and seek, speed, quality, captions, keyboard.
Controls30 passed
Volume, progress bar, call-to-action modal, fullscreen, PiP, auto-hide.
Thumbnails19 passed
Seek preview time, WebVTT sprites, generated thumbnails, parser.
Measured on dist/vega-player.min.js in Chromium. The tests play real video, no mocks. How the tests work
Start building with Vega Player.
One script, one tag, five minutes. The download includes the source, the minified build and the thumbnail tool.