SUPtitles renders Blu-ray subtitles(.sup) in the browser using JS. This project is still in development.
Why?
Display subtitles in the browser without using OCR or other methods to pre-process the subtitles. No changes to the original text and styling(OCR is not always reliable).
How?
Thanks to this article by TheScorpius666, I was able to parse the .sup files and display them by using a HTML canvas.
The subtitles(.sup) can be extracted from a video using ffmpeg
ffmpeg -i video.mkv -map 0:s:0 -c copy subtitle.sup
Usage
Install
Download dist folder or run
npm i suptitles
Import
const videoElement = document// Pass video element and subtitle url to constructorconst sup = videoElement './exampleSubtitle.sup'
SUPtitles will make a canvas covering 100% of its parent. For the subtitles to overlay the video properly, add a container with the position property set to relative.
<div style="position:relative;"> <video controls style="width:100%;" id="video" ></video></div>
Disposing
To dispose of SUPtitles call the dispose method.
const sup = videoElement './exampleSubtitle.sup'sup
Known Issues
- After seeking the current subtitle will be skipped
- No feedback from constructor, invalid files will not output any error
- Probably more..
Building
- Change tsconfig.json to fit your preferences
- Run tsc