-
-
Notifications
You must be signed in to change notification settings - Fork 14
/
README.hbs
99 lines (75 loc) · 4.96 KB
/
README.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<span style="text-align:center; width:100%; display: inline-block;"></span>
# SABRE.js: Substation Alpha suBtitles REnderer
A Gpu Accelerated Javascript Advanced Substation Alpha Subtitles Renderer.
<span style="text-align:center; width:100%; display: inline-block;">[](https://github.com/prettier/prettier) [](https://www.codefactor.io/repository/github/sabre-js/sabre.js) [](https://www.jsdelivr.com/package/npm/@sabre-js/sabre) [](https://openbase.com/js/@sabre-js/sabre?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)</span>
## What is SABRE.js?
SABRE.js adds stylish subtitles to web videos.
## What formats does SABRE.js support?
SABRE.js is a full renderer for Substation Alpha Subtitles and Advanced Substation Alpha Subtitles.
It allows you to draw styled/stylized subtitles over web video with multiple fonts, colors, animations and effects.
<span style="text-align:center; width:100%; display: inline-block;"></span>[](gallery/video/demo_loop.mp4)</video></span>
## Gallery
A gallery of major milestones in the development process.
To view the gallery click [here](/gallery/gallery.md) if you're using a decent browser or [here](/gallery/but_i_use_safari.md) if you like safari or internet explorer.
## Getting Started
Note: Version 2.0.0 of opentype.js is not yet released, in order to use this library currently you must build opentype.js from source.
How to include the library (from the jsdelivr CDN, this cdn is recommended as they publish usage statistics for each package):
```html
<script src="https://cdn.jsdelivr.net/npm/opentype.js@^2.0.0/dist/opentype.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@sabre-js/sabre@latest/dist/sabre.min.js"></script>
```
How to include the library (from the unpkg CDN, for the more privacy minded):
```html
<script src="https://unpkg.com/opentype.js@^2.0.0/dist/opentype.min.js"></script>
<script src="https://unpkg.com/@sabre-js/sabre@latest/dist/sabre.min.js"></script>
```
You can retrieve an instance of the library by calling `sabre.SABRERenderer()`.
Example:
```js
let renderer;
let fonts = [];
// Load the contents of the subtitle file.
fetch("subtitles.ass").then((response) => response.arrayBuffer()).then((subs) => {
// Load the fonts using opentype.js and put them in the fonts array. (this function also returns a promise)
opentype.load("arial.ttf", (font) => {
fonts.push(font);
// Initialize the renderer
renderer = sabre.SABRERenderer({
fonts:fonts,
subtitles:subs,
colorSpace:sabre.VideoColorSpaces.AUTOMATIC,
resolution:[1280,720], // Display resolution of the video in CSS pixels.
nativeResolution:[1280,720] // Resolution of the video file in real pixels (only used if the color space is AUTOMATIC or AUTOMATIC_PC).
});
// Schedule your frame callback using either requestAnimationFrame or requestVideoFrameCallback
});
});
```
or you can initialize using the return value's functions as shown below:
```js
let renderer;
let fonts = [];
// Load the contents of the subtitle file.
fetch("subtitles.ass").then((response) => response.arrayBuffer()).then((subs) => {
// Load the fonts using opentype.js and put them in the fonts array. (this function also returns a promise)
opentype.load("arial.ttf", (font) => {
fonts.push(font);
// Initialize the renderer
renderer = new sabre.SABRERenderer();
renderer.loadSubtitles(subs,fonts);
renderer.setColorSpace(sabre.VideoColorSpaces.AUTOMATIC,1280,720); // Second and third parameters are the native resolution of the video file in real pixels (only used if the color space is AUTOMATIC or AUTOMATIC_PC).
renderer.setViewport(1280,720); // Display resolution of the video in CSS pixels.
});
});
```
You may then call `loadSubtitles` passing in an ArrayBuffer containing the contents of the subtitle file and set the
viewport with `setViewport` as shown in the example above. Anytime the video or player is resized you should call
`setViewport` with the new dimensions of the player.
Each frame, before you call any of the rendering functions, first call `checkReadyToRender` to see if the library is ready
to render a frame of subtitles.
## API Documentation
The documentation generator is a little buggy, anytime it says something is global, that means it's a property of the `sabre.SABRERenderer()` function's returned object.
{{>main}}
## Contributing
Looking to contribute? Check out the [contributing guide](CONTRIBUTING.md)!
© 2012-2024 Patrick "ILOVEPIE" Rhodes Martin.