- ×
A JavaScript ASS subtitle format renderer
Filed under miscellaneousShow AllASS.js
ASS.js uses ass-compiler to parse ASS subtitle file format, and then renders subtitles on HTML5 video.
ASS specs(zh-Hans)
Installation
npm install assjs
Usage
<div id="container" style="position: relative;"> <video id="video" src="./example.mp4" style="position: absolute; width: 100%; height: 100%;" ></video> <!-- ASS will be added here --> </div>
import ASS from 'assjs'; const content = await fetch('/path/to/example.ass').then((res) => res.text()); const ass = new ASS(content, document.querySelector('#video'), { container: document.querySelector('#container'), });
If you click the native fullscreen button in video element, only
<video>
will be fullscreened, so ASS will not show. You should use a custom button and calldocument.querySelector('#container').requestFullscreen()
to ensure ASS is contained.API
Initialization
const ass = new ASS(content, video, { // Subtitles will display in the container. container: document.getElementById('my-container'), // see resampling API below resampling: 'video_width', });
Show
ass.show();
Hide
ass.hide();
Destroy
ass.destroy();
Delay
// Subtitles will be 5s later ass.delay = 5; // Subtitles will be 3s earlier ass.delay = -3;
Resampling
When script resolution(PlayResX and PlayResY) don't match the video resolution, this API defines how it behaves. However, drawings and clips will be always depending on script origin resolution.
There are four valid values, we suppose video resolution is 1280x720 and script resolution is 640x480 in following situations:
video_width
: Script resolution will set to video resolution based on video width. Script resolution will set to 640x360, and scale = 1280 / 640 = 2.video_height
(default): Script resolution will set to video resolution based on video height. Script resolution will set to 853.33x480, and scale = 720 / 480 = 1.5.script_width
: Script resolution will not change but scale is based on script width. So scale = 1280 / 640 = 2. This may causes top and bottom subs disappear from video area.script_height
: Script resolution will not change but scale is based on script height. So scale = 720 / 480 = 1.5. Script area will be centered in video area.
ass.resampling = 'video_width';
TODO
Items with
strikethroughmeans they won't be supported.- [Script Info]
Synch PointPlayDepth- WrapStyle: 0, 3
- Collisions: Reverse
- [Events]
PictureSoundMovieCommand- Dialogue
- Effect
Karaoke: as an effect type is obsolete- Scroll up: fadeawayheight
- Scroll down: fadeawayheight
- Banner: fadeawaywidth
- Text (override codes)
- \k, \kf, \ko, \kt, \K: Karaoke
- \q: 0, 3
- \t([<t1>, <t2>, ][<accel>, ]<style modifiers>): <accel>, \2c, \2a, \[i]clip
- Effect
[Fonts][Graphics]
Known issues
\N
in Aegisub has less height than<br>
in browsers, subbers should avoid to use multiple\N
to position a dialogue, use\pos
instead.- A dialogue with multiple
\t
is not rendered correctly, for transforms in browsers are order-sensitive. - When a dialogue has Effect (Banner, Scroll up, Scroll down) and
\move
at the same time, only\move
works. \be
is just treated as\blur
.