### JWPlayer: Load Subtitles Octopus

Source: https://github.com/libass/javascriptsubtitlesoctopus/wiki/Integration-into-third-party-video-frameworks

Integrate Javascript Subtitles Octopus with JWPlayer. This setup requires the JWPlayer library and specifies the subtitle URL, fonts, and worker script.

```html
<div style="width: 800px; height: 500px;">
  <div id="player">Loading the player...</div>
</div>

<script src="https://your-link-to-the-jwp-library.js"></script>
<script>
   // Player Setup
   var player = jwplayer('player').setup({
       file: 'https://mirror.clarkson.edu/blender/demo/movies/BBB/bbb_sunflower_1080p_30fps_normal.mp4',
       volume: 10,
       autostart: false,
       width: 854,
       height: 480
   });

   player.on('ready', function () {
       var video = player.getContainer().querySelector('video');
       window.SubtitlesOctopusOnLoad = function () {
           var options = {
               video: video,
               subUrl: '/JavascriptSubtitlesOctopus/subtitles/test.ass',
               fonts: ['/JavascriptSubtitlesOctopus/fonts/Arial.ttf', '/JavascriptSubtitlesOctopus/fonts/TimesNewRoman.ttf'],
               workerUrl: '/JavascriptSubtitlesOctopus/assets/js/subtitles-octopus-worker.js'
           };
           window.octopusInstance = new SubtitlesOctopus(options); // You can experiment in console
       };
       if (SubtitlesOctopus) {
           SubtitlesOctopusOnLoad();
       }
   });
</script>
```

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

### Configuration Options

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Provides a comprehensive list of configuration options for SubtitlesOctopus initialization, covering rendering modes, performance tuning, and font loading settings.

```APIDOC
## Configuration Options

Complete configuration options for SubtitlesOctopus initialization including rendering modes, performance tuning, and font loading settings.

### Method

```javascript
new SubtitlesOctopus(options)
```

### Parameters

#### Request Body

- **video** (HTMLVideoElement) - Optional - HTML5 video element for synchronization.
- **canvas** (HTMLCanvasElement) - Optional - Standalone canvas element for rendering.
- **subUrl** (string) - Optional - URL to the subtitle file.
- **subContent** (string) - Optional - Inline ASS subtitle content.
- **workerUrl** (string) - Required - URL to the Web Worker script.
- **legacyWorkerUrl** (string) - Optional - URL to the legacy Web Worker script.
- **fonts** (string[]) - Optional - Array of URLs to custom fonts.
- **availableFonts** (object) - Optional - Mapping of font names to URLs for custom font loading.
- **fallbackFont** (string) - Optional - URL to a fallback font.
- **lazyFileLoading** (boolean) - Optional - Enables lazy loading of subtitle files (requires CORS).
- **renderMode** (string) - Optional - Rendering mode: 'wasm-blend' (default), 'js-blend', or 'lossy'.
- **targetFps** (number) - Optional - Target frames per second for rendering.
- **prescaleFactor** (number) - Optional - Factor to downscale rendering for performance (< 1.0).
- **prescaleHeightLimit** (number) - Optional - Maximum video height before prescaling is applied.
- **maxRenderHeight** (number) - Optional - Maximum rendering height (0 for no limit).
- **libassMemoryLimit** (number) - Optional - Memory limit for libass in MiB (0 for no limit).
- **libassGlyphLimit** (number) - Optional - Glyph limit for libass in MiB (0 for no limit).
- **dropAllAnimations** (boolean) - Optional - Enables an emergency performance mode by dropping animations.
- **timeOffset** (number) - Optional - Time offset in seconds for subtitles.
- **debug** (boolean) - Optional - Enables debug logging.
- **onReady** (function) - Optional - Callback function when the library is ready.
- **onError** (function) - Optional - Callback function for error handling.

### Request Example

```javascript
var options = {
    video: document.getElementById('video'),
    canvas: document.getElementById('canvas'),
    subUrl: '/subtitles/movie.ass',
    workerUrl: '/js/subtitles-octopus-worker.js',
    fonts: ['/fonts/Arial.ttf'],
    availableFonts: {
        'arial': '/fonts/Arial.ttf'
    },
    fallbackFont: '/fonts/fallback-cjk.woff2',
    lazyFileLoading: true,
    renderMode: 'wasm-blend',
    targetFps: 24,
    prescaleFactor: 0.8,
    prescaleHeightLimit: 1080,
    maxRenderHeight: 0,
    libassMemoryLimit: 0,
    libassGlyphLimit: 0,
    dropAllAnimations: false,
    timeOffset: 0,
    debug: false,
    onReady: function() { console.log('Ready'); },
    onError: function(err) { console.error(err); }
};

var instance = new SubtitlesOctopus(options);
```

### Response

This constructor does not return a value but initializes the SubtitlesOctopus instance with the specified configuration.
```

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

### SubtitleOctopus Instantiation Options

Source: https://github.com/libass/javascriptsubtitlesoctopus/blob/master/README.md

Options available when creating a new instance of SubtitleOctopus.

```APIDOC
## SubtitleOctopus Constructor Options

When creating an instance of `SubtitleOctopus`, you can set the following options:

### Parameters

- **video** (HTMLVideoElement) - Optional - The video element to attach listeners to.
- **canvas** (HTMLCanvasElement) - Optional - The canvas to render the subtitles to. If none is given, it will create a new canvas and insert it as a sibling of the video element (only if the video element exists).
- **subUrl** (string) - Required if `subContent` is not specified - The URL of the subtitle file to play.
- **subContent** (string) - Required if `subUrl` is not specified - The content of the subtitle file to play.
- **workerUrl** (string) - Optional - The URL of the worker. (Default: `libassjs-worker.js`)
- **fonts** (Array<string>) - Optional - An array of links to the fonts used in the subtitle.
- **availableFonts** (Object) - Optional - Object with all available fonts - Key is font name in lower case, value is link: `{"arial": "/font1.ttf"}`.
- **fallbackFont** (string) - Optional - URL to override fallback font. Default fallback font is Liberation Sans.
- **lazyFileLoading** (boolean) - Optional - Whether to load files in a lazy way via `FS.createLazyFile()`. Requires `Access-Control-Expose-Headers` for `Accept-Ranges`, `Content-Length`, and `Content-Encoding`.
- **timeOffset** (number) - Optional - The amount of time the subtitles should be offset from the video. (Default: `0`)
- **onReady** (function) - Optional - Function that's called when SubtitlesOctopus is ready.
- **onError** (function) - Optional - Function called in case of critical error.
- **debug** (boolean) - Optional - Whether performance info is printed in the console. (Default: `false`)
- **renderMode** (string) - Optional - Rendering mode. Possible values: `js-blend`, `wasm-blend` (default), `lossy` (EXPERIMENTAL).
- **targetFps** (number) - Optional - Target FPS. (Default: `24`)
- **libassMemoryLimit** (number) - Optional - libass bitmap cache memory limit in MiB (approximate). (Default: `0` - no limit)
- **libassGlyphLimit** (number) - Optional - libass glyph cache memory limit in MiB (approximate). (Default: `0` - no limit)
- **prescaleFactor** (number) - Optional - Scale down (`< 1.0`) or scale up (`> 1.0`) the subtitles canvas. Must be a number > 0. (Default: `1.0`)
- **prescaleHeightLimit** (number) - Optional - The height beyond which the subtitles canvas won't be prescaled. (Default: `1080`)
- **maxRenderHeight** (number) - Optional - The maximum rendering height of the subtitles canvas. (Default: `0` - no limit)
- **dropAllAnimations** (boolean) - Optional - If set to true, attempt to discard all animated tags. (Default: `false`)
```

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

### Initialize SubtitlesOctopus with JWPlayer

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Initialize SubtitlesOctopus after the JWPlayer is ready. Ensure JWPlayer and SubtitlesOctopus scripts are included. The video element is accessed via player.getContainer().querySelector('video').

```html
<div id="player">Loading the player...</div>

<script src="jwplayer.js"></script>
<script src="subtitles-octopus.js"></script>
<script>
var player = jwplayer('player').setup({
    file: 'https://example.com/video.mp4',
    width: 854,
    height: 480
});

var octopusInstance = null;

player.on('ready', function() {
    var video = player.getContainer().querySelector('video');

    octopusInstance = new SubtitlesOctopus({
        video: video,
        subUrl: '/subtitles/movie.ass',
        fonts: ['/fonts/Arial.ttf'],
        workerUrl: '/js/subtitles-octopus-worker.js'
    });
});

// Clean up on player removal
player.on('remove', function() {
    if (octopusInstance) {
        octopusInstance.dispose();
    }
});
</script>
```

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

### Configure SubtitlesOctopus Options

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Comprehensive configuration object for customizing rendering modes, performance, font loading, and event callbacks.

```javascript
var options = {
    // Target elements (one required)
    video: document.getElementById('video'),      // HTML5 video element
    canvas: document.getElementById('canvas'),    // Or standalone canvas

    // Subtitle source (one required)
    subUrl: '/subtitles/movie.ass',              // URL to subtitle file
    subContent: '[Script Info]\n...',            // Or inline ASS content

    // Worker files
    workerUrl: '/js/subtitles-octopus-worker.js',
    legacyWorkerUrl: '/js/subtitles-octopus-worker-legacy.js',

    // Font configuration
    fonts: ['/fonts/Arial.ttf', '/fonts/custom.woff2'],
    availableFonts: {
        'arial': '/fonts/Arial.ttf',
        'times new roman': '/fonts/TimesNewRoman.ttf'
    },
    fallbackFont: '/fonts/fallback-cjk.woff2',
    lazyFileLoading: true,  // Requires CORS headers for range requests

    // Rendering mode: 'wasm-blend' (default), 'js-blend', or 'lossy'
    renderMode: 'wasm-blend',

    // Performance settings
    targetFps: 24,
    prescaleFactor: 1.0,        // < 1.0 downscales for performance
    prescaleHeightLimit: 1080,  // Max height before prescaling
    maxRenderHeight: 0,         // 0 = no limit
    libassMemoryLimit: 0,       // MiB, 0 = no limit
    libassGlyphLimit: 0,        // MiB, 0 = no limit
    dropAllAnimations: false,   // Emergency performance mode

    // Timing
    timeOffset: 0,  // Seconds to offset subtitles

    // Debugging
    debug: false,

    // Callbacks
    onReady: function() { console.log('Ready'); },
    onError: function(err) { console.error(err); }
};

var instance = new SubtitlesOctopus(options);
```

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

### Instantiate SubtitlesOctopus with Video

Source: https://github.com/libass/javascriptsubtitlesoctopus/blob/master/README.md

Use this to connect SubtitlesOctopus to an HTML5 video element. Ensure the video element and subtitle/font URLs are correctly specified.

```javascript
var options = {
    video: document.getElementById('video'), // HTML5 video element
    subUrl: '/test/test.ass', // Link to subtitles
    fonts: ['/test/font-1.ttf', '/test/font-2.ttf'], // Links to fonts (not required, default font already included in build)
    workerUrl: '/libassjs-worker.js', // Link to WebAssembly-based file "libassjs-worker.js"
    legacyWorkerUrl: '/libassjs-worker-legacy.js' // Link to non-WebAssembly worker
};
var instance = new SubtitlesOctopus(options);
```

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

### Basic Video Integration

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Initializes SubtitlesOctopus with an HTML5 video element for automatic subtitle synchronization. The library creates a canvas overlay and handles all video events including timeupdate, seeking, pause, and fullscreen changes.

```APIDOC
## Basic Video Integration

Initializes SubtitlesOctopus with an HTML5 video element for automatic subtitle synchronization. The library creates a canvas overlay and handles all video events including timeupdate, seeking, pause, and fullscreen changes.

### Method

```javascript
new SubtitlesOctopus(options)
```

### Parameters

#### Request Body

- **video** (HTMLVideoElement) - Required - The HTML5 video element to sync with.
- **subUrl** (string) - Required - URL to the subtitle file.
- **fonts** (string[]) - Optional - Array of URLs to custom fonts.
- **workerUrl** (string) - Required - URL to the Web Worker script.
- **legacyWorkerUrl** (string) - Optional - URL to the legacy Web Worker script for older browsers.

### Request Example

```javascript
var options = {
    video: document.getElementById('video'),
    subUrl: '/subtitles/movie.ass',
    fonts: ['/fonts/Arial.ttf', '/fonts/TimesNewRoman.ttf'],
    workerUrl: '/js/subtitles-octopus-worker.js',
    legacyWorkerUrl: '/js/subtitles-octopus-worker-legacy.js'
};

var instance = new SubtitlesOctopus(options);
```

### Response

This constructor does not return a value but initializes the SubtitlesOctopus instance. The library automatically handles subtitle rendering and synchronization.
```

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

### Load Subtitle Track by URL

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Dynamically loads and switches to a different subtitle file by URL. Useful for subtitle language switching or loading new content.

```javascript
var instance = new SubtitlesOctopus(options);

// Switch to a different subtitle track
instance.setTrackByUrl('/subtitles/movie-spanish.ass');

// Switch languages on user selection
document.getElementById('subtitle-select').addEventListener('change', function(e) {
    var lang = e.target.value;
    if (lang === 'none') {
        instance.freeTrack();
    } else {
        instance.setTrackByUrl('/subtitles/movie-' + lang + '.ass');
    }
});
```

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

### Initialize SubtitlesOctopus with HTML5 Video

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Automatically syncs subtitles with an HTML5 video element, handling events like seeking and fullscreen transitions.

```javascript
// Basic setup with video element
var options = {
    video: document.getElementById('video'),
    subUrl: '/subtitles/movie.ass',
    fonts: ['/fonts/Arial.ttf', '/fonts/TimesNewRoman.ttf'],
    workerUrl: '/js/subtitles-octopus-worker.js',
    legacyWorkerUrl: '/js/subtitles-octopus-worker-legacy.js'
};

var instance = new SubtitlesOctopus(options);

// The library automatically:
// - Creates a canvas overlay positioned over the video
// - Syncs subtitle timing with video.currentTime
// - Handles play, pause, seeking, and rate changes
// - Responds to fullscreen and window resize events
```

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

### getStyles(onSuccess, onError)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Retrieves all current subtitle styles from the worker asynchronously.

```APIDOC
## getStyles(onSuccess, onError)

### Description
Retrieves all current subtitle styles from the worker asynchronously.

### Parameters
- **onSuccess** (function) - Required - Callback function receiving the array of styles.
- **onError** (function) - Required - Callback function receiving the error object.
```

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

### createStyle(style)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Creates a new subtitle style that can be used by events.

```APIDOC
## createStyle(style)

### Description
Creates a new subtitle style that can be used by events.

### Parameters
#### Request Body
- **style** (object) - Required - The style configuration object.
```

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

### FlowPlayer: Switch Subtitles

Source: https://github.com/libass/javascriptsubtitlesoctopus/wiki/Integration-into-third-party-video-frameworks

Add subtitle switching functionality to FlowPlayer. Ensure `this.subtitles` contains subtitle URLs and `window.subtitleInstance` is initialized.

```javascript
flowplayer((api, root) => {
    ... /* other api code */
    flowplayer.bean.on(root, 'click', '.fp-subtitle-menu [data-subtitle-index]', function(ev) {
        var idx = ev.target.getAttribute('data-subtitle-index');
        if (idx === '-1') return window.subtitleInstance.freeTrack();
        window.subtitleInstance.setTrackByUrl(api.video.subtitles[idx].src)
    });
});
```

```javascript
subtitles: [
   { "default": true, kind: "subtitles", srclang: "en", label: "English", src: this.subtitles[0].path }
],
```

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

### setTrackByUrl(url)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Dynamically loads and switches to a different subtitle file by URL. Useful for subtitle language switching or loading new content.

```APIDOC
## setTrackByUrl(url)

### Description
Dynamically loads and switches to a different subtitle file by URL. Useful for subtitle language switching or loading new content.

### Method
POST

### Endpoint
`/api/setTrackByUrl`

### Parameters
#### Query Parameters
- **url** (string) - Required - The URL of the subtitle file to load.

### Request Example
```json
{
  "url": "/subtitles/movie-spanish.ass"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates successful track loading.

#### Response Example
```json
{
  "status": "Track loaded successfully"
}
```
```

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

### Create and Add Subtitle Events

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Dynamically creates and adds new subtitle events at runtime. Can add single events or multiple events from an array.

```javascript
var instance = new SubtitlesOctopus(options);

// Add a new subtitle event
instance.createEvent({
    Start: 10000,        // Start time in milliseconds
    Duration: 3000,      // Duration in milliseconds
    Style: 'Default',
    Text: 'This subtitle was added dynamically!'
});

// Add multiple events
var events = [
    { Start: 15000, Duration: 2000, Style: 'Default', Text: 'First line' },
    { Start: 18000, Duration: 2000, Style: 'Default', Text: 'Second line' }
];
events.forEach(function(event) {
    instance.createEvent(event);
});
```

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

### Load Subtitle Track from String Content

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Sets subtitle content directly from a string, enabling dynamic subtitle generation or loading from non-URL sources. Can also fetch content from an API.

```javascript
var instance = new SubtitlesOctopus(options);

// Load subtitle content directly
var assContent = `[Script Info]
ScriptType: v4.00+
PlayResX: 1920
PlayResY: 1080

[V4+ Styles]
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
Style: Default,Arial,48,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,2,2,2,10,10,10,1

[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.00,0:00:04.00,Default,,0,0,0,,Hello, welcome to the video!
Dialogue: 0,0:00:05.00,0:00:08.00,Default,,0,0,0,,This subtitle was loaded dynamically.`;

instance.setTrack(assContent);

// Or fetch from an API
fetch('/api/subtitles/123')
    .then(response => response.text())
    .then(content => instance.setTrack(content));
```

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

### Instantiate SubtitlesOctopus with Canvas

Source: https://github.com/libass/javascriptsubtitlesoctopus/blob/master/README.md

Use this when rendering subtitles directly onto a canvas without an associated video element. You must manually set the current time for rendering.

```javascript
var options = {
    canvas: document.getElementById('canvas'), // canvas element
    subUrl: '/test/test.ass', // Link to subtitles
    fonts: ['/test/font-1.ttf', '/test/font-2.ttf'], // Links to fonts (not required, default font already included in build)
    workerUrl: '/libassjs-worker.js' // Link to file "libassjs-worker.js"
};
var instance = new SubtitlesOctopus(options);
// And then...
instance.setCurrentTime(15); // Render subtitles at 00:15 on your canvas
```

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

### Retrieve All Subtitle Styles

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Retrieves all current subtitle styles asynchronously. Requires callback functions for success and error handling.

```javascript
var instance = new SubtitlesOctopus(options);

// Get all available styles
instance.getStyles(
    function(styles) {
        console.log('Available styles:', styles.length);
        styles.forEach(function(style, index) {
            console.log('Style ' + index + ':', style.Name,
                        'Font:', style.FontName,
                        'Size:', style.FontSize);
        });
    },
    function(error) {
        console.error('Failed to get styles:', error);
    }
);
```

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

### Subtitle Rendering Modes

Source: https://github.com/libass/javascriptsubtitlesoctopus/blob/master/README.md

Explanation of the different rendering modes available for SubtitleOctopus.

```APIDOC
## Rendering Modes

### JS Blending
To use this mode set `renderMode` to `js-blend` upon instance creation. This will do all the processing of the bitmaps produced by libass outside of WebAssembly.

### WASM Blending
To use this mode set `renderMode` to `wasm-blend` upon instance creation. This will blend the bitmaps of the different events together in WebAssembly, so the JavaScript-part only needs to process a single image. If WebAssembly-support is available this will be faster than the default mode, especially for many and/or complex simultaneous subtitles. Without WebAssembly-support it will fallback to asm.js and should at least not be slower than the default mode.

### Lossy Render Mode
To use this mode set `renderMode` to `lossy` upon instance creation. This mode is EXPERIMENTAL.
```

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

### resize(width, height, top, left)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Manually resizes the subtitle canvas. Called automatically on window resize and fullscreen changes when attached to video.

```APIDOC
## resize(width, height, top, left)

### Description
Manually resizes the subtitle canvas. Called automatically on window resize and fullscreen changes when attached to video.

### Method
PUT

### Endpoint
`/api/resize`

### Parameters
#### Request Body
- **width** (number) - Required - The new width of the canvas in pixels.
- **height** (number) - Required - The new height of the canvas in pixels.
- **top** (number) - Required - The top offset of the canvas in pixels.
- **left** (number) - Required - The left offset of the canvas in pixels.

### Request Example
```json
{
  "width": 1280,
  "height": 720,
  "top": 10,
  "left": 20
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates that the canvas has been resized.

#### Response Example
```json
{
  "status": "Canvas resized successfully"
}
```
```

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

### createEvent(event)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Dynamically creates and adds a new subtitle event (dialogue line) at runtime.

```APIDOC
## createEvent(event)

### Description
Dynamically creates and adds a new subtitle event (dialogue line) at runtime.

### Parameters
#### Request Body
- **event** (object) - Required - The subtitle event object containing Start, Duration, Style, and Text fields.
```

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

### Integrate SubtitlesOctopus with FlowPlayer

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Integrate SubtitlesOctopus with FlowPlayer and handle subtitle track switching. Subtitle sources are accessed via api.video.subtitles[idx].src. Ensure the bean event listener is correctly set up for subtitle menu clicks.

```javascript
flowplayer(function(api, root) {
    var octopusInstance = null;

    api.on('ready', function() {
        var video = root.querySelector('video');

        octopusInstance = new SubtitlesOctopus({
            video: video,
            subUrl: api.video.subtitles[0].src,
            workerUrl: '/js/subtitles-octopus-worker.js'
        });
    });

    // Handle subtitle track switching
    flowplayer.bean.on(root, 'click', '.fp-subtitle-menu [data-subtitle-index]', function(ev) {
        var idx = ev.target.getAttribute('data-subtitle-index');

        if (idx === '-1') {
            octopusInstance.freeTrack();
        } else {
            octopusInstance.setTrackByUrl(api.video.subtitles[idx].src);
        }
    });

    api.on('unload', function() {
        if (octopusInstance) {
            octopusInstance.dispose();
        }
    });
});
```

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

### Create New Subtitle Style

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Creates a new subtitle style that can be applied to subtitle events. Custom styles can define font, color, size, and other visual properties.

```javascript
var instance = new SubtitlesOctopus(options);

// Create a custom style
instance.createStyle({
    Name: 'CustomRed',
    FontName: 'Arial',
    FontSize: 48,
    PrimaryColour: '&H000000FF',   // Red (AABBGGRR format)
    OutlineColour: '&H00000000',
    BackColour: '&H00000000',
    Bold: 1,
    Outline: 2,
    Shadow: 2,
    Alignment: 2,  // Bottom center
    MarginV: 30
});

// Use the new style in an event
instance.createEvent({
    Start: 20000,
    Duration: 3000,
    Style: 'CustomRed',
    Text: 'This text is styled in red!'
});
```

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

### Change Subtitle Track by URL

Source: https://github.com/libass/javascriptsubtitlesoctopus/blob/master/README.md

Dynamically change the displayed subtitle track by providing a new URL. This is useful for switching between different subtitle files on the fly.

```javascript
var instance = new SubtitlesOctopus(options);

// ... we want to change the subtitles to the Railgun OP
instance.setTrackByUrl('/test/railgun_op.ass');
```

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

### setRate(rate)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Sets the playback rate multiplier for proper subtitle timing during fast-forward or slow-motion playback.

```APIDOC
## setRate(rate)

### Description
Sets the playback rate multiplier for proper subtitle timing during fast-forward or slow-motion playback.

### Method
PUT

### Endpoint
`/api/setRate`

### Parameters
#### Request Body
- **rate** (number) - Required - The playback rate multiplier (e.g., 0.5, 1.0, 2.0).

### Request Example
```json
{
  "rate": 1.5
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates that the playback rate has been set.

#### Response Example
```json
{
  "status": "Playback rate updated"
}
```
```

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

### getEvents(onSuccess, onError)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Retrieves all current subtitle events from the worker asynchronously.

```APIDOC
## getEvents(onSuccess, onError)

### Description
Retrieves all current subtitle events from the worker asynchronously.

### Parameters
- **onSuccess** (function) - Required - Callback function receiving the array of events.
- **onError** (function) - Required - Callback function receiving the error object.
```

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

### setTrack(content)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Sets subtitle content directly from a string, enabling dynamic subtitle generation or loading from non-URL sources.

```APIDOC
## setTrack(content)

### Description
Sets subtitle content directly from a string, enabling dynamic subtitle generation or loading from non-URL sources.

### Method
POST

### Endpoint
`/api/setTrack`

### Parameters
#### Request Body
- **content** (string) - Required - The subtitle content in ASS format.

### Request Example
```json
{
  "content": "[Script Info]\nScriptType: v4.00+\nPlayResX: 1920\nPlayResY: 1080\n\n[V4+ Styles]\nFormat: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding\nStyle: Default,Arial,48,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,2,2,2,10,10,10,1\n\n[Events]\nFormat: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text\nDialogue: 0,0:00:01.00,0:00:04.00,Default,,0,0,0,,Hello, welcome to the video!\nDialogue: 0,0:00:05.00,0:00:08.00,Default,,0,0,0,,This subtitle was loaded dynamically."
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates successful track setting.

#### Response Example
```json
{
  "status": "Subtitle track set successfully"
}
```
```

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

### dispose()

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Properly disposes of the SubtitlesOctopus instance, terminating the worker and removing event listeners.

```APIDOC
## dispose()

### Description
Properly disposes of the SubtitlesOctopus instance, terminating the worker and removing event listeners. Always call this when done to prevent memory leaks.
```

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

### Retrieve All Subtitle Events

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Retrieves all current subtitle events asynchronously. Requires callback functions for success and error handling.

```javascript
var instance = new SubtitlesOctopus(options);

// Get all subtitle events
instance.getEvents(
    function(events) {
        console.log('Total events:', events.length);
        events.forEach(function(event, index) {
            console.log('Event ' + index + ':', event.Text,
                        'Start:', event.Start,
                        'Duration:', event.Duration);
        });
    },
    function(error) {
        console.error('Failed to get events:', error);
    }
);
```

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

### setStyle(style, index) / removeStyle(index)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Modifies or removes an existing subtitle style at the specified index.

```APIDOC
## setStyle(style, index)

### Description
Modifies an existing subtitle style at the specified index.

### Parameters
- **style** (object) - Required - The updated style object.
- **index** (number) - Required - The index of the style to modify.

## removeStyle(index)

### Description
Removes an existing subtitle style at the specified index.

### Parameters
- **index** (number) - Required - The index of the style to remove.
```

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

### Canvas-Only Rendering

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Renders subtitles to a standalone canvas without video attachment, allowing manual control over subtitle timing. Useful for custom video players or non-video subtitle display.

```APIDOC
## Canvas-Only Rendering

Renders subtitles to a standalone canvas without video attachment, allowing manual control over subtitle timing. Useful for custom video players or non-video subtitle display.

### Method

```javascript
new SubtitlesOctopus(options)
```

### Parameters

#### Request Body

- **canvas** (HTMLCanvasElement) - Required - The standalone canvas element to render subtitles on.
- **subUrl** (string) - Required - URL to the subtitle file.
- **workerUrl** (string) - Required - URL to the Web Worker script.
- **onReady** (function) - Optional - Callback function when the library is ready.
- **onError** (function) - Optional - Callback function for error handling.

### Request Example

```javascript
var options = {
    canvas: document.getElementById('subtitle-canvas'),
    subUrl: '/subtitles/presentation.ass',
    workerUrl: '/js/subtitles-octopus-worker.js',
    onReady: function() {
        console.log('SubtitlesOctopus initialized');
    },
    onError: function(error) {
        console.error('Subtitle error:', error);
    }
};

var instance = new SubtitlesOctopus(options);

// Manually set the time to render subtitles
instance.setCurrentTime(15.5);  // Render subtitles at 00:15.500
instance.setCurrentTime(30.0);  // Jump to 00:30.000
instance.setCurrentTime(0);     // Back to beginning
```

### Response

This constructor does not return a value but initializes the SubtitlesOctopus instance. The `setCurrentTime` method can be used to manually control subtitle display.
```

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

### Dispose SubtitlesOctopus Instance

Source: https://github.com/libass/javascriptsubtitlesoctopus/blob/master/README.md

Call this method to correctly clean up and release resources used by the SubtitlesOctopus instance when it's no longer needed.

```javascript
var instance = new SubtitlesOctopus(options);

// After you've finished using it...

instance.dispose();
```

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

### setCurrentTime(currentTime)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Manually sets the current playback time for subtitle rendering. Used automatically when attached to video, but required for canvas-only mode.

```APIDOC
## setCurrentTime(currentTime)

### Description
Manually sets the current playback time for subtitle rendering. Used automatically when attached to video, but required for canvas-only mode.

### Method
PUT

### Endpoint
`/api/setCurrentTime`

### Parameters
#### Request Body
- **currentTime** (number) - Required - The current playback time in seconds.

### Request Example
```json
{
  "currentTime": 10.5
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates that the current time has been set.

#### Response Example
```json
{
  "status": "Current time updated"
}
```
```

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

### Manually Set Current Playback Time

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Manually sets the current playback time for subtitle rendering. Used automatically when attached to video, but required for canvas-only mode.

```javascript
// For canvas-only rendering
var instance = new SubtitlesOctopus({
    canvas: document.getElementById('canvas'),
    subUrl: '/subtitles/test.ass',
    workerUrl: '/js/subtitles-octopus-worker.js'
});

// Render subtitles at specific times
instance.setCurrentTime(0);      // Start
instance.setCurrentTime(10.5);   // 10.5 seconds
instance.setCurrentTime(60);     // 1 minute

// Sync with custom player
customPlayer.on('timeupdate', function(time) {
    instance.setCurrentTime(time);
});
```

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

### Set Playback Rate

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Sets the playback rate multiplier for proper subtitle timing during fast-forward or slow-motion playback.

```javascript
var instance = new SubtitlesOctopus(options);

// Handle playback rate changes
document.getElementById('speed-select').addEventListener('change', function(e) {
    var rate = parseFloat(e.target.value);
    video.playbackRate = rate;
    instance.setRate(rate);  // Sync subtitle timing
});

// Example rates
instance.setRate(0.5);   // Half speed
instance.setRate(1.0);   // Normal speed
instance.setRate(2.0);   // Double speed
```

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

### freeTrack()

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Removes the currently loaded subtitle track, clearing the canvas. Call this when hiding subtitles or before loading a new track.

```APIDOC
## freeTrack()

### Description
Removes the currently loaded subtitle track, clearing the canvas. Call this when hiding subtitles or before loading a new track.

### Method
DELETE

### Endpoint
`/api/freeTrack`

### Response
#### Success Response (200)
- **status** (string) - Indicates that the subtitle track has been cleared.

#### Response Example
```json
{
  "status": "Subtitle track cleared"
}
```
```

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

### Manually Resize Subtitle Canvas

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Manually resizes the subtitle canvas. Called automatically on window resize and fullscreen changes when attached to video.

```javascript
var instance = new SubtitlesOctopus(options);

// Manual resize for canvas-only mode
instance.resize(1920, 1080, 0, 0);

// Resize on container change
window.addEventListener('resize', function() {
    var container = document.getElementById('player-container');
    instance.resize(
        container.clientWidth,
        container.clientHeight,
        0,
        0
    );
});
```

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

### setEvent(event, index)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Modifies an existing subtitle event at the specified index.

```APIDOC
## setEvent(event, index)

### Description
Modifies an existing subtitle event at the specified index.

### Parameters
- **event** (object) - Required - The updated subtitle event object.
- **index** (number) - Required - The index of the event to modify.
```

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

### setIsPaused(isPaused, currentTime)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Notifies the worker of playback pause state for optimizing render scheduling. Called automatically when attached to video.

```APIDOC
## setIsPaused(isPaused, currentTime)

### Description
Notifies the worker of playback pause state for optimizing render scheduling. Called automatically when attached to video.

### Method
PUT

### Endpoint
`/api/setIsPaused`

### Parameters
#### Request Body
- **isPaused** (boolean) - Required - The current pause state of the playback.
- **currentTime** (number) - Required - The current playback time in seconds.

### Request Example
```json
{
  "isPaused": true,
  "currentTime": 120.5
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates that the pause state has been updated.

#### Response Example
```json
{
  "status": "Pause state updated"
}
```
```

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

### Dispose SubtitlesOctopus Instance

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Properly disposes of the SubtitlesOctopus instance, terminating the worker and removing event listeners to prevent memory leaks. Should be called when the instance is no longer needed, such as when the video ends or the page unloads.

```javascript
var instance = new SubtitlesOctopus(options);

// Clean up when video ends or page unloads
video.addEventListener('ended', function() {
    instance.dispose();
    instance = null;
});

// Or on page navigation
window.addEventListener('beforeunload', function() {
    if (instance) {
        instance.dispose();
    }
});

// For SPA route changes
function destroyPlayer() {
    if (instance) {
        instance.dispose();
        instance = null;
    }
}
```

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

### Render Subtitles to Standalone Canvas

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Renders subtitles to a specific canvas element without video attachment, requiring manual time updates via setCurrentTime.

```javascript
// Canvas-only setup for manual time control
var options = {
    canvas: document.getElementById('subtitle-canvas'),
    subUrl: '/subtitles/presentation.ass',
    workerUrl: '/js/subtitles-octopus-worker.js',
    onReady: function() {
        console.log('SubtitlesOctopus initialized');
    },
    onError: function(error) {
        console.error('Subtitle error:', error);
    }
};

var instance = new SubtitlesOctopus(options);

// Manually set the time to render subtitles
instance.setCurrentTime(15.5);  // Render subtitles at 00:15.500
instance.setCurrentTime(30.0);  // Jump to 00:30.000
instance.setCurrentTime(0);     // Back to beginning
```

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

### Notify Playback Pause State

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Notifies the worker of playback pause state for optimizing render scheduling. Called automatically when attached to video.

```javascript
var instance = new SubtitlesOctopus(options);

// For custom player integration
customPlayer.on('pause', function() {
    instance.setIsPaused(true, customPlayer.currentTime);
});

customPlayer.on('play', function() {
    instance.setIsPaused(false, customPlayer.currentTime);
});
```

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

### Modify or Remove Subtitle Style

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Modifies an existing subtitle style at a specified index or removes a style by its index. Use with caution as it affects all events using that style.

```javascript
var instance = new SubtitlesOctopus(options);

// Modify the default style
instance.setStyle({
    Name: 'Default',
    FontName: 'Times New Roman',
    FontSize: 56,
    PrimaryColour: '&H00FFFFFF',
    Outline: 3,
    Shadow: 3
}, 0);

// Remove a style by index
instance.removeStyle(1);
```

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

### Remove Current Subtitle Track

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Removes the currently loaded subtitle track, clearing the canvas. Call this when hiding subtitles or before loading a new track.

```javascript
var instance = new SubtitlesOctopus(options);

// Toggle subtitles off
document.getElementById('toggle-subtitles').addEventListener('click', function() {
    instance.freeTrack();
});

// Re-enable subtitles later
document.getElementById('enable-subtitles').addEventListener('click', function() {
    instance.setTrackByUrl('/subtitles/movie.ass');
});
```

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

### removeEvent(index)

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Removes a subtitle event at the specified index.

```APIDOC
## removeEvent(index)

### Description
Removes a subtitle event at the specified index.

### Parameters
- **index** (number) - Required - The index of the event to remove.
```

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

### Modify Existing Subtitle Event

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Modifies an existing subtitle event at a specified index. Can be used to update event properties or to edit based on user input after retrieving events.

```javascript
var instance = new SubtitlesOctopus(options);

// Modify the first event
instance.setEvent({
    Start: 5000,
    Duration: 4000,
    Style: 'Default',
    Text: 'Modified subtitle text'
}, 0);

// Edit event based on user input
function editSubtitle(index, newText) {
    instance.getEvents(function(events) {
        var event = events[index];
        event.Text = newText;
        instance.setEvent(event, index);
    }, console.error);
}
```

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

### Remove Subtitle Event

Source: https://context7.com/libass/javascriptsubtitlesoctopus/llms.txt

Removes a subtitle event at the specified index. Can be used to remove a single event or to clear all events by iterating in reverse.

```javascript
var instance = new SubtitlesOctopus(options);

// Remove the first subtitle event
instance.removeEvent(0);

// Remove all events one by one
instance.getEvents(function(events) {
    for (var i = events.length - 1; i >= 0; i--) {
        instance.removeEvent(i);
    }
}, console.error);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.