- Karaoke Support: Full support for \k, \kf, \ko, and \K tags. - Vector Drawings: High-performance rendering of ASS vector paths (\p) using Path2D. - Clipping: Support for rectangular and vector clipping/masking (\clip, \iclip). - Advanced Transformations: - Rotation around all axes (\frz, \frx, \fry). - Scaling (\fscx, \fscy) and Shearing (\fax, \fay). - Custom rotation origin (\org). - Smart Wrapping: Implementation of \q styles for optimal line breaking. - Collision Handling: Automatic vertical shifting to prevent overlapping subtitles. - Blur Effects: Edge blur (\be) and Gaussian blur (\blur) using Canvas filters. - Performance Optimized: Built-in layer caching to minimize redundant redraws.
Usage
$3
| option | description | required | type | default | | :-----: | :---------------------------------------------------------------------------------------------------------: | :------: | :---------------------------: | :-------------------: | | assText | The ass text string | 🚫 | string | undefined | | subUrl | URL to fetch the ASS content from | 🚫 | string | undefined | | video | The video to display the subtile on. Can be either an HTMLVideoElement or string (html query selector ) | ✅ | HTMLVideoElement / string | undefined | | fonts | Custom fonts to load | 🚫 | [Font[]](src/ass.ts#L78) | undefined | | zIndex | zIndex of the rendering frame | 🚫 | number | Drawn after the video | | onReady | A Callback that is invoked when the preprocess of the ass text by render is done | 🚫 | () => void | undefined | | logging | Type of logging | 🚫 | LOGTYPE | LOGTYPE.DISABLE |
> One of assText or subUrl is required.
$3
> [!NOTE] > The simple video tag element, in fullscreen mode, the position of the video is absolutely on top of any element. > No other element can go on top of it. > > It's therefore recommended to use a third party player rather than the native one. You can see an example with plryhere.