A lightweight, zero-dependency VTT and ASS subtitle renderer for web video players.
npm install web-subtitle-renderernpm page: https://www.npmjs.com/package/web-subtitle-renderer
elements. Made to be used in Sync-Player originally.
\pos).
\fad (Fade), \move (Movement).
\frx, \fry, \frz.
\k (Basic timing/highlighting framework).
\blur, \bord, \shad, \fs, \fn, \c (Color).
div, this renderer calculates the actual video content aspect ratio vs the container aspect ratio.
bash
npm install web-subtitle-renderer
`
Usage
$3
You need a video element and an overlay container (usually a div positioned over the video).
`html
`
$3
`javascript
import SubtitleRenderer from 'web-subtitle-renderer';
const video = document.getElementById('my-video');
const overlay = document.getElementById('subtitle-overlay');
const renderer = new SubtitleRenderer(video, overlay);
// Load a track
renderer.loadTrack('path/to/subtitles.ass', 'ass'); // or 'vtt'
// Connect updates
video.addEventListener('timeupdate', () => renderer.update());
window.addEventListener('resize', () => renderer.resize());
`
CSS Styling
For the best experience, add these basic styles to your client:
`css
.subtitle-line {
position: absolute;
pointer-events: none;
text-shadow: 1px 1px 2px black; / Fallback /
color: white;
font-family: sans-serif;
}
.ass-style {
/ ASS styles are applied dynamically by the renderer /
}
``