ASS.js

https://github.com/weizhenye/ass
Admin
ASS.js is a lightweight JavaScript library for rendering Advanced SubStation Alpha (ASS) subtitles...
Tokens:1,669
Snippets:29
Trust Score:9.1
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install ASS.js via NPM

Source: https://github.com/weizhenye/ass/blob/master/README.md

Use the npm package manager to install the library in your project.

```bash
npm install assjs
```

--------------------------------

### Initialization

Source: https://github.com/weizhenye/ass/blob/master/README.md

Initializes a new ASS instance with the provided content, video element, and configuration options.

```APIDOC
## new ASS(content, video, options)

### Description
Creates a new instance of the ASS subtitle renderer.

### Parameters
- **content** (string) - Required - The subtitle content.
- **video** (HTMLVideoElement) - Required - The video element to associate with.
- **options** (object) - Required - Configuration object.
  - **container** (HTMLElement) - Required - The DOM element where subtitles will be rendered.
  - **resampling** (string) - Optional - Defines how script resolution maps to video resolution.
```

--------------------------------

### Initialize ASS Instance

Source: https://github.com/weizhenye/ass/blob/master/README.md

Create a new ASS instance by providing the content, video element, and configuration options.

```js
const ass = new ASS(content, video, {
  // Subtitles will display in the container.
  container: document.getElementById('my-container'),

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

--------------------------------

### Initialize ASS.js

Source: https://github.com/weizhenye/ass/blob/master/README.md

Fetch the subtitle file and initialize the ASS instance with the video and container elements.

```javascript
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('#ass-container'),
});
```

--------------------------------

### Load ASS.js as a classic script

Source: https://github.com/weizhenye/ass/blob/master/README.md

Include the library via a script tag and access it through the global window object.

```html
<script src="/path/to/assjs/dist/ass.global.min.js"></script>
<script>
console.log(window.ASS);
</script>
```

--------------------------------

### Define the player structure

Source: https://github.com/weizhenye/ass/blob/master/README.md

Set up the HTML structure containing the video and the subtitle container.

```html
<div id="player">
  <video id="video" src="./example.mp4"></video>
  <div id="ass-container"></div>
</div>
```

--------------------------------

### Load ASS.js as a module

Source: https://github.com/weizhenye/ass/blob/master/README.md

Import the library using ES module syntax.

```html
<script type="module">
import ASS from '/path/to/assjs/dist/ass.min.js';
</script>
```

--------------------------------

### Visibility Methods

Source: https://github.com/weizhenye/ass/blob/master/README.md

Methods to control the visibility of the subtitle overlay.

```APIDOC
## ass.show()

### Description
Displays the subtitle container.

## ass.hide()

### Description
Hides the subtitle container.
```

--------------------------------

### Resampling

Source: https://github.com/weizhenye/ass/blob/master/README.md

Configures how script resolution maps to video resolution.

```APIDOC
## ass.resampling

### Description
Sets the resampling strategy. Valid values: 'video_width', 'video_height' (default), 'script_width', 'script_height'.
```

--------------------------------

### Configure Resampling

Source: https://github.com/weizhenye/ass/blob/master/README.md

Set the resampling property to define how script resolution scales relative to the video resolution.

```js
ass.resampling = 'video_width';
```

--------------------------------

### Destroy

Source: https://github.com/weizhenye/ass/blob/master/README.md

Cleans up the ASS instance.

```APIDOC
## ass.destroy()

### Description
Destroys the instance and cleans up resources.
```

--------------------------------

### Style the player container

Source: https://github.com/weizhenye/ass/blob/master/README.md

Apply CSS positioning to ensure the subtitle container overlaps the video correctly.

```html
<div id="player" style="position: relative;">
  <video id="video" src="./example.mp4" style="position: absolute; top: 0; left: 0;"></video>
  <div id="ass-container" style="position: absolute; top: 0; left: 0;"></div>
</div>
```

--------------------------------

### Control Subtitle Visibility

Source: https://github.com/weizhenye/ass/blob/master/README.md

Methods to show or hide the subtitles on the video.

```js
ass.show();
```

```js
ass.hide();
```

--------------------------------

### Destroy ASS Instance

Source: https://github.com/weizhenye/ass/blob/master/README.md

Clean up the ASS instance and remove it from the DOM.

```js
ass.destroy();
```

--------------------------------

### Delay

Source: https://github.com/weizhenye/ass/blob/master/README.md

Adjusts the timing of the subtitles.

```APIDOC
## ass.delay

### Description
Sets the subtitle delay in seconds. Positive values delay subtitles, negative values advance them.
```

--------------------------------

### Adjust Subtitle Delay

Source: https://github.com/weizhenye/ass/blob/master/README.md

Set the delay property to shift subtitle timing in seconds.

```js
// Subtitles will be 5s later
ass.delay = 5;
// Subtitles will be 3s earlier
ass.delay = -3;
```
Tokens:
Raw