Quick start

Load the script once and add a player:

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

<vega-player src="/video.mp4" poster="/poster.jpg" color-primary="#ffffff"></vega-player>

A few recipes

Background video. Browsers only autoplay muted video:

<vega-player src="/loop.mp4" autoplay muted loop controls-visible="false" hide-play-button></vega-player>

Speed and quality menus:

<vega-player
  src="/video-720.mp4"
  show-playback-rate
  qualities='[{"label":"720p","src":"/video-720.mp4"},{"label":"360p","src":"/video-360.mp4"}]'>
</vega-player>

Thumbnails on the progress bar. On desktop the player makes them itself; for faster ones, give it a file (how):

<vega-player src="/video.mp4" thumbnails="/thumbs/thumbnails.vtt"></vega-player>

A sign-up box when someone pauses:

<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">
</vega-player>

From JavaScript:

const player = document.querySelector('vega-player');
player.play();
player.setTime(30);
player.addEventListener('vega-player:ended', () => console.log('Done!'));

Everything else is in Attributes and Methods.