vtt-live-edit

Live edit VTT subtitles (delay, sync, position, style...) on html5 native player.

Demonstration

Installation

npm install vtt-live-edit --save

Documentation

The library modify the currently showing subtitle track of a video (selected by the video id)

addOffset

Add an offset to the currently showing subtitle track. Default is 500ms.

addOffset(<video id> [, offset in second]);

removeOffset

Remove an offset to the currently showing subtitle track. Default is 500ms.

removeOffset(<video id> [, offset in second]);

moveLeft

Move the subtitle to the left. Default is 5%.

moveLeft(<video id> [, percent to move]);

moveRight

Move the subtitle to the right. Default is 5%.

moveRight(<video id> [, percent to move]);

moveUp

Move the subtitle up (line by line).

moveUp(<video id>);

moveDown

Move the subtitle down (line by line).

moveDown(<video id>);

setFontSize

Set the subtitles font size

setFontSize(<font size in px>);

setFontColor

Set the subtitles font color

setFontColor(<font color value>);

setText

Set the text of a specific cue

setText(<video id>, <cue index>, <new text value>);

Usage

<video id="video">
    <source src="video.mp4" type="video/mp4"/>
    <track kind="subtitles" label="default" src="subtitle.vtt" default>
</video>

const vtt = require('vtt-live-edit');
// or import vtt from 'vtt-live-edit';

vtt.addOffset('video', 0.5);    // Add 500ms offset
vtt.removeOffset('video', 0.5); // Remove 500ms offset
vtt.moveLeft('video', 5);       // Move subtitle 5% left
vtt.moveRight('video', 5);      // Move subtitle 5% right
vtt.moveUp('video');            // Move subtitle one line up
vtt.moveDown('video');          // Move subtitle one line down
vtt.setFontSize(20);            // Set subtitle size to 20px
vtt.setFontColor('#bbb');       // Set subtitle font color to #BBB
vtt.setText('video', 3, 'Yo!'); // Set 4th cue text to 'Yo!'

License

MIT