This library renders the graphical subtitles format PGS (.sup files) in the browser.
This library makes use of Web Worker API and OffscreenCanvas for faster and optimized rendering if available. Backwards compatibility was tested as far back as Chrome 68 and WebOS 1.2.
Install the package via npm:
npm i --save libpgs
The PGS renderer will create a default canvas element next to the video element:
const videoElement = document.getElementById('video-element');
const pgsRenderer = new libpgs.PgsRenderer({
// Make sure your bundler keeps this file accessible from the web!
workerUrl: './node_modules/libpgs/dist/libpgs.worker.js',
video: videoElement,
subUrl: './subtitle.sup'
});The created default canvas element is using a style definition like this:
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: '100%';
height: '100%';
pointer-events: 'none';
object-fit: 'contain';This only works if the video element is stretched in its parent and if the parent is using the css position property.
<div style="position: relative">
<video id="video-element" src="./video.mp4"></video>
</div>It is also possible to provide a custom canvas element and position it manually:
const videoElement = document.getElementById('video-element');
const canvasElement = document.getElementById('canvas-element');
const pgsRenderer = new libpgs.PgsRenderer({
// Make sure your bundler keeps this file accessible from the web!
workerUrl: './node_modules/libpgs/dist/libpgs.worker.js',
video: videoElement,
canvas: canvasElement,
subUrl: './subtitle.sup'
});You can also adjust time offset between video and subtitle:
// Rendering the subtitle 3 seconds in advance of the video
pgsRenderer.timeOffset = 3.0;Make sure to dispose the renderer when leaving:
// Releases video events and removes the default canvas element
pgsRenderer.dispose();