Web Component

Declarative markup — the element registers itself when the script loads. Theme it with CSS custom properties.

<!-- Load once; registers <vexy-vlip> -->
<script src="vexy-vlip.global.js"></script>
<!-- or, with a bundler: import "vexy-vlip-js/element"; -->

<vexy-vlip
  src="media/sample.mp4"
  track="media/sample.vtt"
  mode="stepped"          <!-- or "continuous" -->
  easing="ease-in-out"
  muted>
</vexy-vlip>

<style>
  vexy-vlip {
    --vv-accent: #2f6fed;
    --vv-card-radius: 16px;
  }
</style>