A JavaScript ASS subtitle format renderer
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 0.0.8 Dec 1, 2018
src update deps Oct 2, 2018
test support Shadow DOM, fix #10 Oct 2, 2018
.eslintrc.json refactory with ES6 Oct 3, 2017
.gitignore refactory with ES6 Oct 3, 2017
.npmrc refactory with ES6 Oct 3, 2017
.travis.yml update deps Oct 2, 2018
LICENSE add license Apr 6, 2015
README.md update deps Oct 2, 2018
karma.conf.js fix test Apr 6, 2018
karma.sauce.js fix test Apr 6, 2018
package.json 0.0.8 Dec 1, 2018
rollup.config.js refactory with ES6 Oct 3, 2017

README.md

ASS.js

Build status Coverage Dependencies NPM version License File size jsDelivr

Browser compatibility

ASS.js uses ass-compiler to parse ASS subtitle file format, and then renders subtitles on HTML5 video.

Demo

ASS specs(zh-Hans)

Installation

npm install assjs

Usage

<video id="video" src="example.mp4"></video>

<script src="dist/ass.min.js"></script>
<script>
fetch('/path/to/example.ass')
  .then(res => res.text())
  .then((text) => {
    const ass = new ASS(text, document.getElementById('video'));
  });
</script>

API

Initialization

const ass = new ASS(text, video, {
  // Subtitles will display in the container.
  // The container will be created automatically if it's not provided.
  container: document.getElementById('my-container'),

  // see resampling API below
  resampling: 'video_width',
});

Resize

If you change the size of video, you should call it.

ass.resize();

Show

ass.show();

Hide

ass.hide();

Destroy

ass.destroy();

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 strikethrough means they won't be supported.

  • [Script Info]
    • Synch Point
    • PlayDepth
    • WrapStyle: 0, 3
    • Collisions: Reverse
  • [Events]
    • Picture
    • Sound
    • Movie
    • Command
    • 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
  • [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.
  • For I'm using the clip-path CSS property to implement \clip, IE and Edge are not supported yet.
  • \be is just treated as \blur.