Installation

Script tag

Add this once per page:

<script type="module" src="https://vega-player.eduardovega.net/vega-player.min.js"></script>

and use the tag wherever you want a player:

<vega-player src="/video.mp4" poster="/poster.jpg"></vega-player>

Download

Open source, MIT. The zip has the ready-to-use files, the source and the tests.

Download v2.4.0 (.zip)

vega-player-2.4.0/
├─ dist/                        ready to use
│  ├─ vega-player.min.js        ES module, minified (recommended)
│  ├─ vega-player.js            ES module
│  ├─ vega-player.iife.min.js   classic <script>, self-executing (window.VegaPlayer)
│  ├─ vega-player.iife.js
│  ├─ vega-player.umd.min.js    UMD: AMD / RequireJS, CommonJS or global
│  ├─ vega-player.umd.js
│  ├─ vega-player.cjs           CommonJS (require) for bundlers
│  ├─ vega-player.d.ts          TypeScript declarations
│  └─ *.map                     source maps
├─ src/vega-player.js           the source (one ES module)
├─ test/                        132 tests (Vitest, real Chromium)
├─ scripts/build.mjs            builds dist/ from src/
├─ tools/generate-thumbnails.sh seek-preview thumbnails with ffmpeg
├─ package.json  README.md  CHANGELOG.md  LICENSE

Which file?

You use…	Load
Plain HTML, modern browsers	<script type="module" src="/js/vega-player.min.js"></script>
Plain HTML without modules (old CMS, inline scripts)	<script src="/js/vega-player.iife.min.js"></script>
RequireJS / AMD	require(['vega-player.umd.min'], (VegaPlayer) => …)
A bundler (Vite, webpack, Rollup, esbuild)	import VegaPlayer from './lib/vega-player.js'
CommonJS	const VegaPlayer = require('./lib/vega-player.cjs')
TypeScript	the same import; types come from vega-player.d.ts

Load one of them, once. That’s all.

Self-hosting

1. Download the package and copy the file you need from dist/ to your static files, for example /js/vega-player.min.js.

2. Load it:

   <script type="module" src="/js/vega-player.min.js"></script>

3. Use <vega-player> in your HTML.

Building from source

npm install
npm run build   # src/ → dist/ in every format
npm run setup   # Chromium for the tests, once
npm test

As an ES module

The file’s default export is the VegaPlayer class. Importing it registers the element; importing it twice is safe.

JavaScript

import VegaPlayer from './vega-player.js';

await customElements.whenDefined('vega-player');
const player = document.querySelector('vega-player');

Bundler (Vite, webpack…)

// Copy vega-player.js into your source folder, then:
import VegaPlayer from './lib/vega-player.js';

// Optional global settings, before players are created
VegaPlayer.i18n = { ...VegaPlayer.i18n, play: 'Reproducir' };

File names

The files are named after the tag (vega-player.min.js…). On Linux servers file names are case-sensitive, so make sure the src in your script tag matches the file exactly.

Requirements

Any browser with Custom Elements and ES modules: current Chrome, Edge, Firefox and Safari 14.1+. Details in Browser support.