VidPly User Manual

Getting started

1. Insert the CSS

 

<link rel="stylesheet" href="src/styles/vidply.css">

 

2. Add your media element

 

<!-- Video -->
<video data-vidply width="800" height="450">
  <source src="your-video.mp4" type="video/mp4">
  <track kind="subtitles" src="captions.vtt" srclang="en" label="English">
</video>

<!-- Audio -->
<audio data-vidply>
  <source src="your-audio.mp3" type="audio/mpeg">
</audio>

 

3. Import the player

For production builds:

 

<script type="module">
  import Player from './dist/prod/vidply.esm.min.js';
  // Player auto-initializes elements with data-vidply attribute
</script>

 

For development with raw TypeScript sources (e.g. via vite or tsx):

 

import Player from './src/index';

const player = new Player('#video');