Subtitle library as a MotorCortex Incident
$ npm install @donkeyclip/motorcortex-subtitles
# OR
$ yarn add @donkeyclip/motorcortex-subtitlesimport Subtitle from "@donkeyclip/motorcortex-subtitles";MotorCortex Subtitles takes the capabilities of Subtitle library of parsing subtilte files. The library exposes just one Incident with the name "ParseText" which can parse supported subtitle files and add them to your clip. The duration is auto calculated from your subtitles. The container params of the subtitles clip should be the same with the parent clip.
SRT or WebVTT
import { HTMLClip, loadPlugin } from "@donkeyclip/motorcortex/";
import mySubsTextFile from "./subs.srt.js";
import SubtitlesDefinition from "@donkeyclip/motorcortex-subtitles/";
const Subtitles = loadPlugin(SubtitlesDefinition);
const clip = new HTMLClip({
html: `
<div class="container"></div>`,
css: `
.container{
width:100%;
height:100%;
position:relative;
background:#151515;
}
`,
host: document.getElementById("clip"),
containerParams: {
width: "720px",
height: "640px",
},
});
const subtitle = new Subtitles.ParseText(
{
fontSize: 14,
textColor: "white",
fontFamily: "Ubuntu",
subtitles: mySubsTextFile,
position: "bottom",
maxWidth: 400,
paddingBottom: 50,
},
{
selector: ".container",
containerParams: {
width: "720px",
height: "640px",
},
}
);
clip.addIncident(subtitle, 0);
clip.play();| Name | Description | Default | Type |
|---|---|---|---|
| fontSize | Font size in pixels of the subtitles | 12 | number |
| textColor | The color of the subtitles | white | - |
| fontFamily | Font family of the subtiltes | 'Ubuntu' | string |
| subtitles | The subtitles loaded text | - | string |
| position | Position of the subtitles container [top, center, bottom] | bottom | string |
| maxWidth | The maximum width of the subtitles container in pixels | "100%" | number |
| paddingTop | The padding top value of the subtitles container in pixels | 0 | number |
| paddingBottom | The padding bottom value of the subtitles container in pixels | 0 | number |
https://donkeyclip.github.io/motorcortex-subtitles/demo/
