Home

Awesome

Actions Status

SubtitlesOctopus displays subtitles in .ass format and easily integrates with HTML5 videos. Since it uses libass, SubtitlesOctopus supports most SSA/ASS features and enables you to get consistent results in authoring and web-playback, provided libass is also used locally.

ONLINE DEMO / other examples with demo

Features

Included Libraries

Usage

To start using SubtitlesOctopus you only need to instantiate a new instance of SubtitlesOctopus and specify its Options.

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);

After that SubtitlesOctopus automatically "connects" to your video and it starts to display subtitles. You can use it with any HTML5 player.

See other examples.

Using only with canvas

You're also able to use it without any video. However, that requires you to set the time the subtitles should render at yourself:

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

Changing subtitles

You're not limited to only display the subtitle file you referenced in your options. You're able to dynamically change subtitles on the fly. There's three methods that you can use for this specifically:

var instance = new SubtitlesOctopus(options);

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

Cleaning up the object

After you're finished with rendering the subtitles. You need to call the instance.dispose() method to correctly dispose of the object.

var instance = new SubtitlesOctopus(options);

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

instance.dispose();

Options

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

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 (EXPERIMENTAL)

To use this mode set renderMode to lossy upon instance creation. The Lossy Render mode has been created by @no1d as a suggestion for fix browser freezing when rendering heavy subtitles (#46), it uses createImageBitmap to render the bitmap in the Worker, using Promises instead of direct render on canvas in the Main Thread. When the browser start to hang, it will not lock main thread, instead will run Async, so if the function createImageBitmap fail, it will not stop the rendering process at all and may cause some bitmap loss or simply will not draw anything in canvas, mostly on low end devices.

WARNING: Experimental, not stable and not working in some browsers

How to build?

Dependencies

Get the Source

Run git clone --recursive https://github.com/libass/JavascriptSubtitlesOctopus.git

Build inside a Container

Docker

  1. Install Docker
  2. ./run-docker-build.sh
  3. Artifacts are in /dist/js

Buildah

  1. Install Buildah and a suitable backend for buildah run like crun or runc
  2. ./run-buildah-build.sh
  3. Artifacts are in /dist/js

Build without Containers

  1. Install the dependency packages listed above
  2. make
    • If on macOS with libtool from brew, LIBTOOLIZE=glibtoolize make
  3. Artifacts are in /dist/js

Why "Octopus"?

How am I an Octopus? Ba da ba da ba!